@php
    use App\Enums\CustomElementType;
    if (!empty($item['custom_elements'])) {
        $elements = $item['custom_elements'];
        $option = getOption($elements, $lang);
        $displayedResults = $option['displayed_results'] ?? 3;
    }
@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 swiper_custom_content_{{ $displayedResults }}">
                <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) }} swiper_custom_content_{{ $displayedResults }}">
                    <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) }} swiper_custom_content_{{ $displayedResults }}">
                    <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>
        if ($(`.horizontal_swiper.swiper_custom_content_${@json($displayedResults)}`)) {
            new Swiper(`.horizontal_swiper.swiper_custom_content_${@json($displayedResults)}`, {
                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($displayedResults),
                        spaceBetween: 30,
                    },
                },
            });
        }
        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,
            },
        });
        $(document).ready(function() {
            function setSwiperHeight(element) {
                const slides = $(element).find('.swiper-slide');
                slides.css('height', 'auto');

                const height = $(element).height();

                slides.css('height', height + 'px');
            }

            const swipers = $(`.pc.horizontal_swiper.swiper_custom_content_${@json($displayedResults)}`);

            swipers.each(function() {
                setSwiperHeight(this);
                $(window).on('resize', () => setSwiperHeight(this));
            });
        });
        (function() {
            const linkHref = "https://assets.micado-rayout.jp/css/content-style.css";
            if (!document.querySelector(`link[href="${linkHref}"]`)) {
                const link = document.createElement("link");
                link.rel = "stylesheet";
                link.href = linkHref;
                document.head.appendChild(link);
            }
        })();
    </script>
@endpush