@extends('home.layouts.index')

@section('title')
    {{ $brand->name ?? 'محصولات' }}
@endsection



@section('style')
    <style>
        .product-box::after,
        .product-box::before {
            display: none !important;
        }
    </style>
@endsection

@section('script')

    <script>
         $('.catRange').slider({
            id: 'slider5b',
            min: {{$min_price}},
            max: {{$max_price}},
            range: true,
            step: 1000,
            value: [{{$min_price}}, {{$max_price}}],
            rtl: 'false',
            formatter: function formatter(val) {
                
                var price_amount = val[0] + ' - ' + val[1];
                
                
                if (Array.isArray(val)) {
                    $('#price-amount').val(price_amount);
                  
                  
                    return val[0] + ' تومان ' + '  تا   ' + val[1] + ' تومان ';
                } else {
                    return val;
                }



            },


        });

        function persianToEnglishNumbers(str) {
            const persianNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] ;
            const englishNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];

            let englishStr = str;
            for (let i = 0; i < persianNumbers.length; i++) {
                englishStr = englishStr.replace(new RegExp(persianNumbers[i], 'g'), englishNumbers[i]);
            }
            return englishStr;
        }

        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);
        }

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





        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 = [];

            if (sort_id!=null){
                $('#sort_input').val(sort_id)
            }
            let page =  $(this).data('page');



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


                sort = $(tag).val();
            }
            let price_amount = $('#price-amount').val() ?? 0;

       

            $.each($('.attr_filter_ids:checked'), function () {
                attribute_values.push($(this).val());
            });

            $.ajax({
                 url: "{{ route('home.products.brand',['brand'=>$brand->alias]) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    attribute_values: attribute_values,
                    sort: sort,
                    price_amount: price_amount,
                    page: page,
           
                },
                dataType: "json",
                type: 'get',
                beforeSend: function () {
                    $('.loader-filter').show();
                },
                success: function (msg) {


                    $('.loader-filter').hide();

                    if (msg[0] === 1) {
                        $('#post-data').html(msg[1]);
                        total = msg[2];
                        current_page = 1;
                        $('#load-more').html(msg[3]);
                        $('.modal-filter').fadeOut();
                    }
                }
            })

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

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




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



    </script>
@endsection

@section('content')


    <!-- start breadcroumb -->


    <!-- end breadcroumb -->

    <!-- top category -->

    <!-- end category -->

    <!-- end category -->

    <!-- main content page -->
    <div class="content content-parent">
        <div class="container-fluid">
            <!-- start filter in mobile -->
            <div class="custom-filter d-lg-none d-block">
                <button
                    class="btn border-0 main-color-green shadow-box px-4 rounded-3 position-fixed btn-filter-float"
                    style="z-index: 999; bottom: 80px"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasRight"
                    aria-controls="offcanvasRight"
                >
                    <i class="bi bi-funnel font-20 fw-bold text-white"></i>
                    <span class="d-block font-14 text-white">فیلتر</span>
                </button>

                <div
                    class="offcanvas offcanvas-start"
                    tabindex="-1"
                    id="offcanvasRight"
                    aria-labelledby="offcanvasRightLabel"
                >
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasRightLabel-2">
                            فیلتر ها
                        </h5>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"
                        ></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="item-boxs position-sticky top-0">
                            <div class="item-box shadow-box">
                                <div class="title">
                                    <div
                                        class="d-flex align-items-center justify-content-between"
                                    >
                                        <h6 class="font-14">محدوده قیمت</h6>
                                        <a
                                            class="btn border-0"
                                            data-bs-toggle="collapse"
                                            href="#collapsePrice1"
                                            role="button"
                                            aria-expanded="false"
                                        >
                                            <i class="bi bi-chevron-down"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="desc collapse show" id="collapsePrice1">
                                    <div class="filter-item-content">
                                        <form action="" method="get">
                                            <div class="form-group">
                                                <input type="range" class="catRange" name="range[]" style="display:none"/>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>



                            @foreach($attributes as $attribute)
                                <div class="item-box shadow-box">
                                    <div class="title">
                                        <div
                                            class="d-flex align-items-center justify-content-between"
                                        >
                                            <h6 class="font-14">{{ $attribute->name }}</h6>
                                            <a
                                                class="btn border-0"
                                                data-bs-toggle="collapse"
                                                href="#collapseItemBoxColor"
                                                role="button"
                                                aria-expanded="false"
                                            >
                                                <i class="bi bi-chevron-down"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="desc collapse show" id="collapseItemBoxColor">
                                        <div class="filter-item-content">
                                            <form action="">
                                                @foreach($attribute->AttributeValues()->orderby('priority_show','asc')->whereIn('id',$all_attribute_value_exists_ids)->get() as $attrValue)
                                                    <div
                                                        class="d-flex align-items-center justify-content-between flex-wrap mb-3"
                                                    >
                                                        <div class="form-check">
                                                            <label for="attr_filter_{{ $attrValue->id }}" class="form-check-label"
                                                            >                             {{ $attrValue->name }}

                                                            </label>
                                                            <input
                                                                autocomplete="off" id="attr_filter_{{ $attrValue->id }}"
                                                                onclick="filter_products(null,null,this)"
                                                                type="checkbox" name="attr_filter_ids[]"

                                                                value="{{ $attrValue->id }}"
                                                                class="form-check-input attr_filter_ids"
                                                            />
                                                        </div>

                                                    </div>
                                                @endforeach

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- end filter mobile -->

            <div class="row">
                <div class="col-lg-3 d-lg-block d-none">
                    <div class="item-boxs position-sticky top-0">

                        <div class="item-box shadow-box">
                            <div class="title">
                                <div
                                    class="d-flex align-items-center justify-content-between"
                                >
                                    <h6 class="font-14">محدوده قیمت</h6>
                                    <a
                                        class="btn border-0"
                                        data-bs-toggle="collapse"
                                        href="#collapsePrice"
                                        role="button"
                                        aria-expanded="false"
                                    >
                                        <i class="bi bi-chevron-down"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="desc collapse show" id="collapsePrice">
                                <div class="filter-item-content">
                                    <form action="" method="get">
                                        <div class="form-group">
                                            <input type="range" class="catRange" name="range[]" />
                                            <input type="hidden" id="price-amount">
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>


                        @foreach($attributes as $attribute)
                        <div class="item-box shadow-box">
                            <div class="title">
                                <div
                                    class="d-flex align-items-center justify-content-between"
                                >
                                    <h6 class="font-14">{{ $attribute->name }}</h6>
                                    <a
                                        class="btn border-0"
                                        data-bs-toggle="collapse"
                                        href="#collapseItemBoxColor"
                                        role="button"
                                        aria-expanded="false"
                                    >
                                        <i class="bi bi-chevron-down"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="desc collapse show" id="collapseItemBoxColor">
                                <div class="filter-item-content">
                                    <form action="">
                                        @foreach($attribute->AttributeValues()->orderby('priority_show','asc')->whereIn('id',$all_attribute_value_exists_ids)->get() as $attrValue)
                                        <div
                                            class="d-flex align-items-center justify-content-between flex-wrap mb-3"
                                        >
                                            <div class="form-check">
                                                <label for="attr_filter_{{ $attrValue->id }}" class="form-check-label"
                                                >                             {{ $attrValue->name }}
                                   
                                                </label>
                                                <input
                                                    autocomplete="off" id="attr_filter_{{ $attrValue->id }}"
                                                    onclick="filter_products(null,null,this)"
                                                    type="checkbox" name="attr_filter_ids[]"

                                                    value="{{ $attrValue->id }}"
                                                    class="form-check-input attr_filter_ids"
                                                />
                                            </div>

                                        </div>
                                        @endforeach

                                    </form>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        
                   
                        
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="filter-items shadow-box mb-4 bg-white p-4 rounded-4">
                        <div class="row g-3 align-items-center">
                          
                            <div class="col-md-4">
                                <div class="filter-item">
                                    <div class="filter-item-select">
                                        <form action="">
                                            <div>
                                                <div class="row align-items-center">
                                                    <div class="col-5">
                                                        <h6>نمایش بر اساس:</h6>
                                                    </div>
                                                    <div class="col-7">
                                        
                                                        
                                                                                 <select onchange="filter_products(null,this)" class="form-select">
                                        <option {{ $sort == 0 ? 'selected' : '' }} value="0">پیش فرض</option>
                                        <option value="5">پر فروش ترین</option>
                                        <option value="4">ارزان ترین</option>
                                        <option value="3">گران ترین</option>
                                        <option value="1">جدید ترین</option>
                                        <option value="2">قدیمی ترین</option>
                                    </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div id="post-data" class="row g-4">
                        @foreach($products as $product)
                            <div class="col-lg-4 col-sm-6">
                                @include('home.sections.product_box')
                            </div>
                        @endforeach

                    </div>
                    <div class="my-paginate mt-5">
                        <nav id="load-more" aria-label="Page navigation example">
                          {{$products->links()}}
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection