@foreach($categoriesTree as $category)

@endforeach

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

    <div class="row m-0 ">
        <div class="col-6 text-left fb-900 font-24 p-0 categories_title text_1"> <i class="fas fa-bars"></i>  {{ __('lang.categories') }}  </div>
    </div>

    @if($agent->isPhone())
            @else
            @endif


    <!--Carousel Wrapper-->
    <div id="categories-carousel" class="carousel slide carousel-multi-item" data-interval="false"  data-ride="carousel">
        <div class="custom-controls p-0 pt-4">
            <div class="row mx-0 px-0">
                @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 category" class="btn p-0 flex-auto text-start btn-floating color-brown-grey-two font-16" href="#categories-carousel" data-bs-target="#categories-carousel" data-bs-slide="prev">

                                <span class="icon-circles">
                                    <span> <i class="fa {{$dir=='rtl'?'fa-chevron-right':'fa-chevron-left'}}"></i></span>
                                </span>
                            </a>
                        </div>
                        <div>
                            <a aria-label="go to next category" class="btn p-0 flex-auto text-end btn-floating color-brown-grey-two font-16" href="#categories-carousel" data-bs-target="#categories-carousel" data-bs-slide="next">
                                <span class="icon-circles">
                                    <span> <i class="fa {{$dir=='rtl'?'fa-chevron-left':'fa-chevron-right'}}"></i></span>
                                </span>
                            </a>
                        </div>
                        <!--/.Controls-->
                    </div>
                @endif
            </div>
        </div>
        <!--Slides-->
        <div class="carousel-inner" role="listbox" id="categories-inner">

            @if(sizeof($categoriesTree) > 0)
            @foreach(array_chunk($categoriesTree,$count) as $chunk)
                <div class="carousel-item {{$loop->first ?'active' : ''}}">
                    <div class="row m-0 px-{{ sizeof($categoriesTree) > $count ? '4' : 'auto' }} mt-4 align-items-center">
                        @foreach($chunk as $data)
                            <div class="col-{{ $col }} px-1 text-center">
                                <a aria-label="go to {{ $data->trans[0]->categories_title }} page" href="{{ categoryRoute($data)  }}">
                                    <div class="background_2 category-slide-item position-relative">
                                        <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="40px" width="40px"  class="contain-img sponsor-img" loading="lazy" >
                                        <div class="text_3 font-18 fb-900 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{
            /* height: 120px !important; */
            padding: 13px 5px 8px;
            border: 2px solid var(--border_1);
            border-radius: 50px;
        }
        .category-slide-item img{
            position: absolute;
            display: inline !important;
            width: auto !important;
            /* top: -30% !important;  */
            /* left: 50%; */
            transform: translate(-50%, -85%);
         ;
        }
        .rtl .category-slide-item img{
            transform: translate(50%, -85%)
        }
        #categories-carousel .carousel-item .row{
            height: 100px;
        }
        .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: 29%;
            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