<div class="card mt-3">
    <div class="card-body">
        <label for="categories"><?php echo app('translator')->get('Categories'); ?></label>
        <?php if(!blank($categories)): ?>
            <input class="form-control mb-3 searchCategory" placeholder="Search Category" />

            <div class="categories-checkboxes">
                <?php if (isset($component)) { $__componentOriginal4f54cd3217050e1e261fd6fbbe7664b6 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal4f54cd3217050e1e261fd6fbbe7664b6 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.category-checkbox','data' => ['categories' => $categories]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('category-checkbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['categories' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($categories)]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal4f54cd3217050e1e261fd6fbbe7664b6)): ?>
<?php $attributes = $__attributesOriginal4f54cd3217050e1e261fd6fbbe7664b6; ?>
<?php unset($__attributesOriginal4f54cd3217050e1e261fd6fbbe7664b6); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal4f54cd3217050e1e261fd6fbbe7664b6)): ?>
<?php $component = $__componentOriginal4f54cd3217050e1e261fd6fbbe7664b6; ?>
<?php unset($__componentOriginal4f54cd3217050e1e261fd6fbbe7664b6); ?>
<?php endif; ?>
            </div>
        <?php else: ?>
            <div class="h-100 py-3 d-flex justify-content-center align-items-center flex-column">
                <small class="text-muted"><?php echo app('translator')->get('No category added yet'); ?></small>
                <a href="<?php echo e(route('admin.category.all')); ?>"><?php echo app('translator')->get('Add Categories From Here'); ?></a>
            </div>
        <?php endif; ?>

        <div class="not-found d-none">
            <div class="empty-notification-list text-center">
                <img src="<?php echo e(getImage('assets/images/empty_list.png')); ?>" alt="empty">
                <p class="message"><?php echo app('translator')->get('No categories found'); ?></p>
            </div>
        </div>
    </div>
</div>

<?php $__env->startPush('script'); ?>
    <script src="<?php echo e(asset('assets/admin/js/highlighter22.js')); ?>"></script>
    <script>
        (function($) {
            "use strict";

            const categories = <?php echo json_encode(@$product ? $product->categories->pluck('id') : [], 15, 512) ?>;

            $('.searchCategory').on('input', function() {
                const searchTerm = $(this).val().trim().toLowerCase();

                $('.child').addClass('d-none');
                $('.not-found').addClass('d-none');
                $('.categories-checkboxes').removeClass('d-none');

                let found = false;

                $('.form-check-label').each(function() {
                    const labelText = $(this).text().trim().toLowerCase();

                    if (labelText.includes(searchTerm)) {
                        $(this).closest('.child').removeClass('d-none');
                        $(this).closest('.child').parents('.child').removeClass('d-none');
                        found = true;
                    }
                });

                if (!found) {
                    $('.not-found').removeClass('d-none');
                    $('.categories-checkboxes').addClass('d-none');
                }
            });

            $('.searchCategory').highlighter22({
                targets: [".categories-checkboxes .form-check-label span", ],
            });

            <?php if(@$product): ?>
                $(`[name="categories[]"]`).val(categories);
                const firstChecked = document.querySelector('.categories-checkboxes input[type="checkbox"]:checked');
                if (firstChecked) {
                    const container = document.querySelector('.categories-checkboxes');
                    const containerTop = container.getBoundingClientRect().top;
                    const itemTop = firstChecked.getBoundingClientRect().top;

                    const scrollToPosition = container.scrollTop + (itemTop - containerTop - 15);

                    container.scrollTo({
                        top: scrollToPosition
                    });
                }
            <?php endif; ?>
        })(jQuery);
    </script>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('style'); ?>
    <style>
        .not-found,
        .categories-checkboxes {
            height: 295px;
            overflow-y: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 1rem 0;
        }

        .not-found {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .not-found .message {
            color: #b8b8b8
        }
    </style>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/creativedesignbd/ecommerce7.creativedesign.com.bd/core/resources/views/admin/product/partials/product_categories.blade.php ENDPATH**/ ?>