<?php
    $activeLevels = \App\Models\Level::active()->get();
    if ($type == 'service' || $type == 'software') {
        $activeFeatures = \App\Models\Feature::active()->orderBy('name')->get();
    }
    $skill = request('skill');
?>
<aside id="jss-offcanvas-sidebar" class="offcanvas-sidebar offcanvas-sidebar--jss">
    <button type="button" class="btn--close">
        <i class="fas fa-times"></i>
    </button>

    <div class="offcanvas-sidebar__body">
        <!-- Categories Section -->
        <div class="offcanvas-sidebar-block">
            <div class="offcanvas-sidebar-block__header">
                <span class="offcanvas-sidebar-block__title"><?php echo app('translator')->get('Categories'); ?></span>
            </div>
            <div class="offcanvas-sidebar-block__content" data-toggle="overflow-content"
                data-target="#offcanvas-sidebar-block-btn-1">
                <ul class="offcanvas-sidebar-list">
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li class="offcanvas-sidebar-list__item">
                            <a class="offcanvas-sidebar-list__link"
                                href="<?php echo e(route('category.wise.product', [slug($category->name), $category->id])); ?>">
                                <svg width="8" height="9" viewBox="0 0 8 9" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.32079 4.33948L0.278356 0.262272C0.221281 0.229277 0.15048 0.229277 0.092658 0.262272C0.0355829 0.295266 0 0.356424 0 0.422759V8.57716C0 8.64351 0.0355829 8.70467 0.092658 8.73765C0.121204 8.75396 0.153451 8.76248 0.185316 8.76248C0.217563 8.76248 0.249445 8.75433 0.278356 8.73765L7.32079 4.66044C7.37787 4.62708 7.41309 4.56592 7.41309 4.49995C7.41309 4.43398 7.37787 4.37246 7.32079 4.33948Z"
                                        fill="#757575" />
                                </svg>
                                <span><?php echo e(__($category->name)); ?></span>
                            </a>
                        </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
            <button id="offcanvas-sidebar-block-btn-1" class="offcanvas-sidebar-block__btn" type="button">
                <span><?php echo app('translator')->get('See more'); ?></span>
                <i class="fas fa-angle-up"></i>
            </button>
        </div>

        <!-- Filter by Level Section -->
        <form action="<?php echo e(route('filter')); ?>" method="GET">
            <input name="type" type="hidden" value="<?php echo e($type); ?>">
            <div class="offcanvas-sidebar-block">
                <div class="offcanvas-sidebar-block__header">
                    <span class="offcanvas-sidebar-block__title"><?php echo app('translator')->get('Filter by Level'); ?></span>
                </div>
                <div class="offcanvas-sidebar-block__content">
                    <ul class="offcanvas-sidebar-list">
                        <?php $__currentLoopData = $activeLevels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li class="offcanvas-sidebar-list__item">
                                <div class="form-check form--check">
                                    <input class="form-check-input" id="level-<?php echo e($level->id); ?>" name="level[]"
                                        type="checkbox" value="<?php echo e($level->id); ?>"
                                        <?php if(!empty($levels) && in_array($level->id, $levels)): ?> checked <?php endif; ?>>
                                    <label class="form-check-label"
                                        for="level-<?php echo e($level->id); ?>"><?php echo e(__(ucFirst($level->name))); ?></label>
                                </div>
                            </li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
                <button id="offcanvas-sidebar-block-btn-2" class="offcanvas-sidebar-block__btn" type="button">
                    <span><?php echo app('translator')->get('See more'); ?></span>
                    <i class="fas fa-angle-up"></i>
                </button>
            </div>

            <!-- Features Section (conditional) -->
            <?php if($type == 'service' || $type == 'software'): ?>
                <div class="offcanvas-sidebar-block">
                    <div class="offcanvas-sidebar-block__header">
                        <span class="offcanvas-sidebar-block__title"><?php echo app('translator')->get('Features'); ?></span>
                    </div>
                    <div class="offcanvas-sidebar-block__content">
                        <ul class="offcanvas-sidebar-list">
                            <?php $__currentLoopData = $activeFeatures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li class="offcanvas-sidebar-list__item">
                                    <div class="form-check form--check">
                                        <input class="form-check-input" id="feature-<?php echo e($feature->id); ?>"
                                            name="feature[]" type="checkbox" value="<?php echo e($feature->id); ?>"
                                            <?php if(!empty($features) && in_array($feature->id, $features)): ?> checked <?php endif; ?>>
                                        <label class="form-check-label"
                                            for="feature-<?php echo e($feature->id); ?>"><?php echo e(__($feature->name)); ?></label>
                                    </div>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                    <button id="offcanvas-sidebar-block-btn-3" class="offcanvas-sidebar-block__btn" type="button">
                        <span><?php echo app('translator')->get('See more'); ?></span>
                        <i class="fas fa-angle-up"></i>
                    </button>
                </div>
            <?php endif; ?>

            <div class="offcanvas-sidebar-block">
                <span class="offcanvas-sidebar-block__title">
                    <?php echo app('translator')->get('Filter by Price'); ?>
                </span>
                <div class="offcanvas-sidebar-block__content overflow-visible">
                    <div class="price-filter">
                        <div class="range-slider" data-min="<?php echo e($priceRange[0] ?? 1); ?>"
                            data-max="<?php echo e($priceRange[1] ?? 100); ?>" data-min-default="25" data-max-default="50"></div>
                        <div class="price-filter__wrapper">
                            <input id="price" name="price" type="text" readonly="" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</aside>


<?php $__env->startPush('script'); ?>
    <script>
        $(document).ready(function() {

            (function($) {
                "use strict";

                let firstLoad = true;

                // Function to perform AJAX request for filtering and pagination
                function performAjaxRequest(page = 1) {
                    let url = new URL("<?php echo e(route('filter')); ?>");

                    // Set page parameter
                    url.searchParams.set('page', page);


                    // Get sorting value from the select dropdown
                    let sortValue = $('.sortBy').val();
                    if (sortValue) {
                        url.searchParams.set('sorting', sortValue);
                    } else {
                        url.searchParams.delete('sorting');
                    }

                    // Add level filters to URL parameters
                    $('input[name="level[]"]:checked').each(function() {
                        url.searchParams.append('level[]', $(this).val());
                    });

                    // Add feature filters to URL parameters
                    $('input[name="feature[]"]:checked').each(function() {
                        url.searchParams.append('feature[]', $(this).val());
                    });

                    // Set or update price filter
                    let priceRange = $('#price').val();
                    if (priceRange) {
                        url.searchParams.set('price', priceRange);
                    } else {
                        url.searchParams.delete('price');
                    }

                    url.searchParams.set('type', '<?php echo e($type); ?>');
                    url.searchParams.set('featured', '<?php echo e(@$featured ?? 'false'); ?>');
                    <?php if(request()->tag): ?>
                        url.searchParams.set('tag', '<?php echo e(request()->tag); ?>');
                    <?php endif; ?>
                    <?php if(request()->skill): ?>
                        url.searchParams.set('skill', '<?php echo e(request()->skill); ?>');
                    <?php endif; ?>

                    <?php if(@$skill): ?>
                        url.searchParams.set('skill', '<?php echo e(@$skill); ?>');
                    <?php endif; ?>

                    // Display loader, hide current product list
                    $('.productListCol').addClass('d-none');
                    $('.productListLoader').removeClass('d-none');
                    $('.empty-message-box').addClass('d-none');

                    // Perform AJAX request
                    $.ajax({
                        url: url.toString(),
                        type: 'GET',
                        success: function(data) {
                            if (firstLoad && data.priceRange) {
                                firstLoad =
                                    false; // Ensure the slider is set only on the first load
                                initializeSlider(data.priceRange[0], data.priceRange[1]);
                            }

                            $('.productList').html(data.html);

                            
                            // Construct results message based on pagination data
                            let resultsText = '';
                            if (data.pagination) {
                                if (data.pagination.total > 0) {
                                    resultsText = `<?php echo app('translator')->get('Showing'); ?> ${data.pagination.from} <?php echo app('translator')->get('to'); ?> ${data.pagination.to} <?php echo app('translator')->get('of'); ?> ${data.pagination.total} <?php echo app('translator')->get('results'); ?>`;
                                } else {
                                    resultsText = `<?php echo app('translator')->get('No results found'); ?>`;
                                }
                            } else {
                                resultsText = `<?php echo app('translator')->get('No results found'); ?>`;
                            }
                            

                            $('.page-top__results').text(resultsText);

                            var viewType = localStorage.getItem('product_view_type') || 'grid-view';
                            $('.jss-row').removeClass('row-list-layout').addClass(viewType ===
                                'list-view' ? 'row-list-layout' : '');

                            $('.productListCol').removeClass('d-none');
                            $('.productListLoader').addClass('d-none');

                            var tooltipTriggerList = [].slice.call(document.querySelectorAll(
                                '[data-bs-toggle="tooltip"]'));
                            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                                return new bootstrap.Tooltip(tooltipTriggerEl);
                            });
                        },
                        error: function() {
                            $('.productListCol').addClass('d-none');
                            $('.productListLoader').removeClass('d-none');

                            // Retry
                            setTimeout(function() {
                                performAjaxRequest(page);
                            }, 500);
                        }
                    });



                }

                // Event bindings
                $('.sortBy').on('change', function() {
                    performAjaxRequest();
                });

                $('input[type="checkbox"]').on('change', function() {
                    performAjaxRequest();
                });

                $('#price').on('change', function() {
                    performAjaxRequest();
                });

                function initializeSlider(minPrice, maxPrice) {

                    $('.range-slider').each((index, element) => {
                        let slider = $(element);

                        slider.slider({
                            range: true,
                            animate: false,
                            min: parseInt(minPrice),
                            max: parseInt(maxPrice),
                            values: [parseInt(minPrice), parseInt(maxPrice)],
                            change: (event, ui) => {
                                performAjaxRequest();
                            }
                        });
                    });

                    $('.price-filter').each((index, element) => {
                        let currency = '$';
                        let price = $(element).find('[name="price"]');
                        let rangeSlider = $(element).find('.range-slider');
                        let value0 = rangeSlider.slider('values', 0) || 0;
                        let value1 = rangeSlider.slider('values', 1) || 0;
                        price.val(
                            `${currency}${value0} - ${currency}${value1}`
                        );

                        rangeSlider.on('slide', (event, ui) => {
                            price.val(
                                `${currency}${ui.values[0]} - ${currency}${ui.values[1]}`);
                        });
                    });

                }



                // Intercept pagination link clicks
                $(document).on('click', '.pagination a', function(e) {
                    e.preventDefault();
                    let page = $(this).attr('href').split('page=')[1];
                    if (page) {
                        performAjaxRequest(page);
                    }

                    $('html, body').animate({
                        scrollTop: $('.page-top').offset().top - 100
                    }, 700);

                });

                performAjaxRequest();

            })(jQuery);

        });
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/u710135641/domains/compulancer.com/public_html/core/resources/views/templates/basic/partials/filter.blade.php ENDPATH**/ ?>