@php
    use App\Enums\CustomElementType;
    if (!empty($item['custom_elements'])) {
        $elements = $item['custom_elements'];
        $option = getOption($elements, $lang);
    }
@endphp

@if (isset($option) && isset($elements))
    <div {{ setStyle(['background' => fieldPropertyValue('bg_color', $option)]) }} class="custom-content-v2">
        {{-- <p class="title">{{ fieldPropertyValue('title', $option) }}</p> --}}
        @if (fieldPropertyValue('custom_element_type', $item) > CustomElementType::FOUR_COLUMN)
            <div class="pc swiper horizontal_swiper">
                <div class="swiper-wrapper">
                    @foreach ($elements['contents'] as $index => $content)
                        <div class="swiper-slide" style="{{ getStyle($option) }}">
                            {!! renderPreview($content, $lang) !!}</div>
                    @endforeach
                </div>
                <div class="swiper-button flex">
                    <div class="swiper-button-custom swiper-button-custom-prev swiper-button-prev"></div>
                    <div class="swiper-button-custom swiper-button-custom-next swiper-button-next"></div>
                </div>
            </div>
            @if (getClassSwiper($option))
                <div class="sp {{ getClassSwiper($option) }}">
                    <div class="swiper-wrapper">
                        @foreach ($elements['contents'] as $index => $content)
                            <div class="swiper-slide" style="{{ getStyle($option) }}">
                                {!! renderPreview($content, $lang) !!}</div>
                        @endforeach
                    </div>
                    <div class="swiper-button flex">
                        <div class="swiper-button-custom swiper-button-custom-prev swiper-button-prev"></div>
                        <div class="swiper-button-custom swiper-button-custom-next swiper-button-next"></div>
                    </div>
                </div>
            @else
                <div class="sp" style="{!! getStyle($option) !!}">
                    @foreach ($elements['contents'] as $index => $content)
                        <div class="content-custom">
                            {!! renderPreview($content, $lang) !!}
                        </div>
                    @endforeach
                </div>
            @endif
        @else
            @if (getClassSwiper($option))
                <div class="sp {{ getClassSwiper($option) }}">
                    <div class="swiper-wrapper">
                        @foreach ($elements['contents'] as $index => $content)
                            <div class="swiper-slide" style="{{ getStyle($option) }}">
                                {!! renderPreview($content, $lang) !!}</div>
                        @endforeach
                    </div>
                    <div class="swiper-button flex">
                        <div class="swiper-button-custom swiper-button-prev"></div>
                        <div class="swiper-button-custom swiper-button-next"></div>
                    </div>
                </div>
                <div class="pc-grid sp-none {{ fieldPropertyValue('position', $option) == 'start' ? 'align-start' : 'align-end' }}" style="{!! getStyle($option) !!}">
                    @foreach ($elements['contents'] as $index => $content)
                        <div class="content-custom">
                            {!! renderPreview($content, $lang) !!}
                        </div>
                    @endforeach
                </div>
            @else
                <div class="pc-grid {{ fieldPropertyValue('position', $option) == 'start' ? 'align-start' : 'align-end' }}" style="{!! getStyle($option) !!}">
                    @foreach ($elements['contents'] as $index => $content)
                        <div class="content-custom">
                            {!! renderPreview($content, $lang) !!}
                        </div>
                    @endforeach
                </div>
            @endif
        @endif
    </div>
@endif
@push('script')
    <script>
        new Swiper(".pc-flex .image_custom_swiper", {
            loop: false,
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        new Swiper(".sp-flex .image_custom_swiper", {
            loop: false,
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

        new Swiper('.horizontal_swiper', {
            loop: true,
            allowTouchMove: false,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: ".swiper-button-custom-next",
                prevEl: ".swiper-button-custom-prev",
            },
            breakpoints: {
                768: {
                    slidesPerView: 1,
                },
                769: {
                    slidesPerView: @json($option['displayed_results'] ?? 3),
                    spaceBetween: 30,
                },
            },
        });
    </script>
@endpush