@push('style-after-global')
<style>
.swiper-container-video {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding-bottom: 5%;
    z-index: 1;
}
</style>
@endpush

{{-- video --}}
<div class="card-header" style="margin: 0rem 0rem 1rem 0rem; padding: 0rem 1rem 0rem 1rem; background-color: transparent !important; border-radius: 3px;">
    <div class="card-content">
        <div style="margin: 1rem 0rem 1rem 0rem; padding: 0rem 1rem 0rem 1rem;">
            {{-- video content --}}
            @if ($videos)

                <section>
                    <div class="swiper-container-video">
                        <div class="swiper-wrapper">
                            @foreach($videos as $row)
                            <div class="swiper-slide">
                                <div class="card-body">
                                    <div class="card-body text-center" style="border-radius: 0.1rem; box-shadow: 0 1px 10px 0 rgba(192, 192, 192);">
                                        <iframe class="rounded" width="100%" height="300"
                                            src="{{ $row['url'] }}">
                                        </iframe>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <div class="swiper-pagination"></div>

                    </div>
                </section>

            @else
            <p class="text-center">
                Video Tidak Ditemukan
            </p>
            @endif
            {{-- end video content --}}

        </div>
    </div>
</div>
{{-- end video --}}

@push('script-after-global')
<script>

var swiper = new Swiper('.swiper-container-video', {
    slidesPerView: 1,
    freeMode: false,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
});
</script>
@endpush