@foreach($categoriesTree as $category)

@endforeach

<div class="container my-5 position-relative" >

    <div class="custom-controls pt-4">
        <div class="row">
            @if($agent->isPhone())
                        @else
                            @endif
            @if(sizeof($categoriesTree) > $count)
                <div class="col-12 d-flex justify-content-between div-carousal-controls categories-carousal-controls  p-0 text-end" id="categories-controls">
                    <!--Controls-->
                    <div>
                        <a aria-label="go to previous categories" class="btn flex-auto text-start btn-floating color-brown-grey-two font-16" href="#categories-carousel" data-bs-target="#categories-carousel" data-bs-slide="prev"><i class="fa {{$dir=='rtl'?'fa-chevron-right':'fa-chevron-left'}}"></i></a>
                    </div>
                    <div>
                        <a aria-label="go to next categories" class="btn flex-auto text-end btn-floating color-brown-grey-two font-16" href="#categories-carousel" data-bs-target="#categories-carousel" data-bs-slide="next"><i class="fa {{$dir=='rtl'?'fa-chevron-left':'fa-chevron-right'}}"></i></a>
                    </div>
                    <!--/.Controls-->
                </div>
            @endif
        </div>
    </div>

    <!--Carousel Wrapper-->
    <div id="categories-carousel" class="carousel slide carousel-multi-item" data-interval="false"  data-ride="carousel">
        <!--Slides-->
        <div class="carousel-inner" role="listbox" id="categories-inner">
            @if($agent->isPhone())
                            @else
                            @endif
            @if(sizeof($categoriesTree) > 0)
            @foreach(array_chunk($categoriesTree,$count) as $chunk)
                <div class="carousel-item {{$loop->first ?'active' : ''}}">
                    <div class="row m-0  align-items-center">
                        @foreach($chunk as $data)
                            <div class="col-{{ $col }} px-4 px-2 text-center">
                                <a aria-label="go to all {{ $data->trans[0]->categories_title }} page" href="{{categoryRoute($data)}}">
                                    <div class="background_2 category-slide-item py-3">
                                        <img src="{{ $data->categories_img ? $imagesBaseUrl.'uploads/'.env('accountId').'/categories/original/'.$data->categories_img : $imagesBaseUrl.'img/no-image.png'}}" alt="{{ $data->trans[0]->categories_title }} logo" height="70px" width="auto"  class="contain-img sponsor-img" loading="lazy" >
                                        <div class="text_1 font-15 fb-700 mt-1">{{ $data->trans[0]->categories_title }}</div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
            @endif
        </div>
        <!--/.Slides-->
    </div>
    <!--/.Carousel Wrapper-->

</div>

@push('css')
    <style>
        .category-slide-item{
            border-radius: 30px;
            border: 2px solid var(--border_2);
            padding: 7px;
            text-align: center;

        }
        .custom-controls {
            /* position: absolute;
            top: 16%;
            z-index: 1;
            padding: 0px 25px 0px 0px;
            width: 96%; */
            --tw-translate-x: -50%;
            --tw-translate-y: -50%;
            justify-content: space-between;
            right:0%;
            margin-left: 0;
            margin-right: 0;
            pointer-events: none;
            position: absolute;
            top: 19%;
            transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            width: 100%;
            z-index: 2;
        }
        .custom-controls a{
            pointer-events: auto;
        }
        @media (max-width: 576px) {
            .custom-controls {
                padding: 0px 25px 0px 25px;
            }
        }

    </style>
@endpush
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var myCarousel = document.getElementById('categories-carousel');
            var carousel = new bootstrap.Carousel(myCarousel, {
                interval: 2000,
                wrap: true,
                touch: true
            });

            // Manually trigger touch support for the carousel
            var touchStartX = 0;
            var touchEndX = 0;

            myCarousel.addEventListener('touchstart', function (event) {
                touchStartX = event.changedTouches[0].screenX;
            }, false);

            myCarousel.addEventListener('touchend', function (event) {
                touchEndX = event.changedTouches[0].screenX;
                handleSwipeGesture();
            }, false);

            function handleSwipeGesture() {
                if (touchEndX < touchStartX) {
                    carousel.next();
                }
                if (touchEndX > touchStartX) {
                    carousel.prev();
                }
            }
        });
    </script>
@endpush