@extends('v2-portal::app-layout', $layoutParams)

@section('main-section-area')
    {!! $page->content !!}
@endsection

@push('head-styles')
<style>
    .brand-slider:not(.swiper-initialized) .swiper-slide ~ .swiper-slide {
        display: none;
    }
</style>
@endpush

@push('scripts')
<script>
    (function() {
        function initBrand(slider) {
            if (!slider) { <!-- Debug output suppressed in production --> return; }
            if (slider.swiper) slider.swiper.destroy(true, true);
            try {
                new Swiper(slider, {
                    slidesPerView: 5,
                    spaceBetween: 30,
                    speed: 800,
                    centeredSlides: true,
                    autoplay: { delay: 3000, disableOnInteraction: true },
                    breakpoints: {
                        0: { slidesPerView: 2, spaceBetween: 15 },
                        768: { slidesPerView: 3, spaceBetween: 20 },
                        992: { slidesPerView: 4, spaceBetween: 25 },
                        1200: { slidesPerView: 5, spaceBetween: 30 },
                    },
                });
                <!-- Debug output suppressed in production -->
            } catch (e) {
                <!-- Debug output suppressed in production -->
            }
        }

        function tryInit() {
            if (typeof Swiper === 'undefined') { <!-- Debug output suppressed in production --> return false; }
            initBrand(document.querySelector('.brand-slider'));
            return true;
        }

        if (document.readyState === 'complete') {
            setTimeout(tryInit, 100);
        } else {
            window.addEventListener('load', function() {
                setTimeout(tryInit, 100);
            });
        }
    })();
</script>
@endpush