@php
    $cartsId = $cartsId ?? null;
    $productsId = $productsId ?? null;
    $titleView = $titleView ?? 'includes.frequently-bought-together-title';
    $cartsIdJs = $cartsId ? "'" . addslashes($cartsId) . "'" : 'null';
    $productsIdJs = $productsId ? "'" . addslashes($productsId) . "'" : 'null';
@endphp
@if($cartsId || $productsId)
    <div class="frequently-bought-together-section mt-5 mb-4"
         x-data="frequentlyBoughtTogether({{ $cartsIdJs }}, {{ $productsIdJs }})"
         x-init="init()"
         x-show="loading || products.length > 0"
         x-cloak>

        <div :class="!loading && products.length > 0 ? 'd-flex align-items-center justify-content-between mb-3 ' : 'd-none'">
            <div>
                @include($titleView)
            </div>
            <div :class="!loading && products.length > 1 ? 'd-flex gap-2' : 'd-none'">
                <button type="button" class="fbt-nav-btn" @click="scrollCarousel(-1)" aria-label="{{ __('lang.previous') }}">
                    <i class="fas fa-chevron-{{ $dir == 'ltr' ? 'left' : 'right' }}"></i>
                </button>
                <button type="button" class="fbt-nav-btn" @click="scrollCarousel(1)" aria-label="{{ __('lang.next') }}">
                    <i class="fas fa-chevron-{{ $dir == 'ltr' ? 'right' : 'left' }}"></i>
                </button>
            </div>
        </div>

        <div :class="loading ? 'd-flex align-items-center justify-content-center py-5' : 'd-none'">
            <div class="loader-icon"></div>
        </div>

        <div :class="{ 'fbt-carousel': !loading && products.length > 0, 'd-none': loading || products.length === 0, 'fbt-dragging': isDragging }"
             x-ref="carousel"
             x-html="productsHtml"
             @mousedown="startDrag($event)"
             @mousemove.window="onDrag($event)"
             @mouseup.window="stopDrag()"
             @mouseleave="stopDrag()"
             @click.capture="dragMoved && $event.stopPropagation()"
             @dragstart.prevent>
        </div>
    </div>

    @push('css')
        <style>
            .frequently-bought-together-section .fbt-carousel {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-behavior: smooth;
                scrollbar-width: none;
                -ms-overflow-style: none;
                padding-bottom: 4px;
                cursor: grab;
                user-select: none;
            }
            .frequently-bought-together-section .fbt-carousel.fbt-dragging {
                cursor: grabbing;
                scroll-behavior: auto;
            }
            .frequently-bought-together-section .fbt-carousel::-webkit-scrollbar {
                display: none;
            }
            .frequently-bought-together-section .fbt-card {
                flex: 0 0 auto;
                width: 160px;
            }
            @media (min-width: 768px) {
                .frequently-bought-together-section .fbt-card {
                    width: calc((100% - 3.5 * 12px) / 4.25);
                    min-width: 250px;
                }
            }
            .frequently-bought-together-section .fbt-nav-btn {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: 1px solid var(--border_1, #ddd);
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .frequently-bought-together-section .fbt-nav-btn:hover {
                background: var(--background_2, #f5f5f5);
            }
        </style>
    @endpush

    @push('js')
        <script>
            function frequentlyBoughtTogether(cartsId, productsId) {
                return {
                    cartsId: cartsId,
                    productsId: productsId,
                    loading: true,
                    products: [],
                    productsHtml: '',
                    isDragging: false,
                    dragStartX: 0,
                    dragScrollStart: 0,
                    dragMoved: false,

                    init() {
                        this.load();
                    },

                    load() {
                        if (!this.cartsId && !this.productsId) {
                            this.loading = false;
                            return;
                        }

                        this.loading = true;

                        var params = new URLSearchParams();
                        if (this.cartsId) {
                            params.set('carts_id', this.cartsId);
                        } else {
                            params.set('products_id', this.productsId);
                        }

                        fetch(`{{ route('frequentlyBoughtTogether.json') }}?${params.toString()}`, {
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                        })
                        .then((res) => res.json())
                        .then((json) => {
                            var count = (json && json.count) ? json.count : 0;
                            this.products = new Array(count);
                            this.productsHtml = (json && json.products) ? json.products : '';

                            this.$nextTick(() => {
                                var el = this.$refs.carousel;
                                if (!el) return;
                                if (window.CartHelpers && window.CartHelpers.reinitAlpine) {
                                    window.CartHelpers.reinitAlpine(el);
                                }
                                if (window.bootstrap && window.bootstrap.Carousel) {
                                    el.querySelectorAll('[data-bs-ride="carousel"]').forEach((carouselEl) => {
                                        new window.bootstrap.Carousel(carouselEl);
                                    });
                                }
                            });
                        })
                        .catch(() => {
                            this.products = [];
                            this.productsHtml = '';
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                    },

                    scrollCarousel(direction) {
                        var el = this.$refs.carousel;
                        if (!el) return;
                        var amount = el.clientWidth * 0.8;
                        var isRtl = '{{ $dir }}' === 'rtl';
                        el.scrollBy({ left: direction * amount * (isRtl ? -1 : 1), behavior: 'smooth' });
                    },

                    startDrag(e) {
                        var el = this.$refs.carousel;
                        if (!el) return;
                        this.isDragging = true;
                        this.dragMoved = false;
                        this.dragStartX = e.pageX;
                        this.dragScrollStart = el.scrollLeft;
                    },

                    onDrag(e) {
                        if (!this.isDragging) return;
                        var el = this.$refs.carousel;
                        if (!el) return;
                        var delta = e.pageX - this.dragStartX;
                        if (Math.abs(delta) > 3) this.dragMoved = true;
                        el.scrollLeft = this.dragScrollStart - delta;
                    },

                    stopDrag() {
                        if (!this.isDragging) return;
                        this.isDragging = false;
                        setTimeout(() => { this.dragMoved = false; }, 0);
                    }
                };
            }
        </script>
    @endpush
@endif