@extends('home.layouts.index')

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

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

@section('description')
    {{ $category->meta_description ?? '-'  }}
@endsection

@section('style')

@endsection

@section('script')
<script>
    const parent = document.querySelector('.parent');
const showMoreBtn = document.querySelector('.show-more-btn');

document.addEventListener('DOMContentLoaded',()=>{
            showMoreBtn.innerHTML  = '<a class="btn">       نمایش بیشتر        </a>'

})

showMoreBtn.addEventListener('click', () => {
    if (!parent.classList.contains('show')) {
        const fullHeight = parent.scrollHeight;
        parent.style.height = fullHeight + 'px';
        parent.offsetHeight;
        parent.classList.add('show');
        showMoreBtn.innerHTML = '<a class="btn">       بستن          </a>'

    } else {
        parent.style.height = '230px';
        parent.classList.remove('show');
        showMoreBtn.innerHTML = '<a class="btn">       نمایش بیشتر          </a>'
    }
});
</script>

    <script>
         $('.catRange').slider({
    id: 'slider5b',
    min: {{$min_price}},
    max: {{$max_price}},
    range: true,
    step: Math.round(({{$max_price}} - {{$min_price}}) / 100),
    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;

            let brands = [];
            $.each($('#brand_content input:checked'), function () {
                brands.push($(this).val());
            });
            let is_installment = [];
            $.each($('#installment_content input:checked'), function () {
                is_installment.push($(this).val());
            });

            $.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,
                    price_amount: price_amount,
                    page: page,
                    brands: brands,
                    is_installment:is_installment
                },
                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();
        }


     var elementPosition = $('.fixed-scroll').offset().top;



    $(window).scroll(function(){
      if($(window).scrollTop() > elementPosition){

        $('.item-boxs').css('position','sticky').css('top',-750);


      } else {

        $('.item-boxs').css('position','static');
      }
    });
    </script>
@endsection

@section('content')
    <section class="bg-aplus-dark">
        <div class="container text-light">
            <div class="row align-items-center py-5 gx-5">
                <div class="col-lg-3" style="padding: 0">
                    <img
                        src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->image) }}"
                        class="img-fluid"
                        style="object-fit: cover"
                    />
                </div>
                <div class="col-lg-9 d-flex flex-column justify-content-center">
                    <h1 class="fw-light mb-2 text-white" style="font-size: 18px">
                        {{$category->name}}
                    </h1>
                    <p class="mb-4">
{{$category->short_description}}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <div class="bg-light">
        <div class="container py-4">
            <div class="row g-4">
                <!-- Desktop Sidebar -->
                <aside class="col-lg-3 d-none d-lg-block">
                    <div id="filter-sidebar-desktop">
{{--                        <div class="bg-white p-4 mb-3">--}}
{{--                            <div--}}
{{--                                class="form-check form-switch d-flex row-reverse justify-content-between align-items-center"--}}
{{--                            >--}}
{{--                                <input--}}
{{--                                    class="form-check-input"--}}
{{--                                    type="checkbox"--}}
{{--                                    role="switch"--}}
{{--                                    id="available-only"--}}
{{--                                    checked--}}
{{--                                />--}}
{{--                                <label class="form-check-label fw-bold" for="available-only"--}}
{{--                                >فقط کالاهای موجود</label--}}
{{--                                >--}}
{{--                            </div>--}}
{{--                        </div>--}}

                        <div class="bg-white p-4 mb-3">
                            <h3 class="fw-bold mb-2" style="font-size: 16px">
                                محدوده قیمت
                            </h3>
                            <div class="pt-4">
                                <div
                                    id="price-slider-track"
                                    class="position-relative bg-light rounded-pill"
                                    style="height: 0.25rem"
                                >
                                    <div
                                        id="price-slider-range"
                                        class="position-absolute h-100 rounded-pill"
                                        style="background-color: var(--color-primary-red)"
                                    ></div>
                                    <div
                                        id="price-slider-min-handle"
                                        class="position-absolute top-50 translate-middle"
                                        style="transform: translate(50%, -50%)"
                                    >
                                        <div
                                            class="rounded-circle cursor-pointer"
                                            style="
                            width: 1rem;
                            height: 1rem;
                            background-color: var(--color-primary-red);
                          "
                                        ></div>
                                    </div>
                                    <div
                                        id="price-slider-max-handle"
                                        class="position-absolute top-50 translate-middle"
                                        style="transform: translate(50%, -50%)"
                                    >
                                        <div
                                            class="rounded-circle cursor-pointer"
                                            style="
                            width: 1rem;
                            height: 1rem;
                            background-color: var(--color-primary-red);
                          "
                                        ></div>
                                    </div>
                                </div>
                                <div
                                    class="d-flex justify-content-between small text-muted mt-3"
                                >
                                    <span id="min-price-display"></span>
                                    <span id="max-price-display"></span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-4">
                            <div class="accordion accordion-flush" id="filterAccordion">
                                <!-- Filter Group: Type -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button
                                            class="accordion-button collapsed fw-bold p-0 py-3"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#collapseType"
                                            aria-expanded="false"
                                            aria-controls="collapseType"
                                        >
                                            نوع
                                        </button>
                                    </h2>
                                    <div
                                        id="collapseType"
                                        class="accordion-collapse collapse"
                                    >
                                        <div class="accordion-body pt-2 pb-0">
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="type-1"
                                                /><label class="form-check-label" for="type-1"
                                                >فرهای بخارپز (5)</label
                                                >
                                            </div>
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="type-2"
                                                /><label class="form-check-label" for="type-2"
                                                >فرهای تکی (12)</label
                                                >
                                            </div>
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="type-3"
                                                /><label class="form-check-label" for="type-3"
                                                >فرهای دوگانه (3)</label
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Filter Group: Size -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button
                                            class="accordion-button collapsed fw-bold p-0 py-3"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#collapseSize"
                                            aria-expanded="false"
                                            aria-controls="collapseSize"
                                        >
                                            سایز
                                        </button>
                                    </h2>
                                    <div
                                        id="collapseSize"
                                        class="accordion-collapse collapse"
                                    >
                                        <div class="accordion-body pt-2 pb-0">
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="size-1"
                                                /><label class="form-check-label" for="size-1"
                                                >43 اینچ (4)</label
                                                >
                                            </div>
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="size-2"
                                                /><label class="form-check-label" for="size-2"
                                                >50 اینچ (2)</label
                                                >
                                            </div>
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    id="size-3"
                                                /><label class="form-check-label" for="size-3"
                                                >55 اینچ (1)</label
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- More filters... -->
                            </div>
                        </div>
                    </div>
                </aside>

                <div class="col-lg-9">
                    <div
                        class="d-flex flex-column flex-lg-row justify-content-between align-items-center mb-4"
                    >
                        <button
                            id="filter-open-button"
                            class="d-lg-none btn btn-light border d-flex align-items-center gap-2 mb-3 w-100"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#filter-drawer"
                            aria-controls="filter-drawer"
                        >
                            <i class="bx bx-filter-alt"></i>
                            <span>فیلتر</span>
                        </button>
                        <p class="small d-none d-lg-block">نمایش 1 - 12 از 12 نتیجه</p>
                        <div class="w-100 w-lg-auto">
                            <select class="form-select">
                                <option>مرتب سازی: پیشنهادی</option>
                                <option>مرتب سازی: جدیدترین</option>
                                <option>مرتب سازی: قیمت (کم به زیاد)</option>
                                <option>مرتب سازی: قیمت (زیاد به کم)</option>
                            </select>
                        </div>
                    </div>

                    <div id="post-data" class="row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3">
                        @foreach($products as $product)
                            @include('home.sections.product_category_box')
                        @endforeach
                    </div>

                    <div class="w-100 border rounded-lg mt-4">
                        <div
                            id="description-content"
                            class="text-secondary overflow-hidden p-4 bg-white deactive"
                            style="max-height: 7rem"
                        >
                     {!! $category->description !!}
                        </div>
                        <button
                            id="toggle-description"
                            class="w-100 d-flex justify-content-center align-items-center gap-2 py-2 px-4 bg-light rounded-bottom"
                        >
                            <span id="toggle-text">نمایش بیشتر</span>
                            <i id="toggle-arrow" class="bx bx-chevron-down fs-4"></i>
                        </button>
                    </div>

                    <nav
                        class="d-flex justify-content-center mt-4"
                        aria-label="Page navigation"
                    >
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#">قبلی</a>
                            </li>
                            <li class="page-item active">
                                <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="#">بعدی</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
@endsection