@extends('frontend::layouts.master')

@section('content')
    <div class="pb-12">
        <h1 class="text-center mb-2">Banner Splide Carousel</h1>
        <x-frontend::plugin.splidecarousel slideName='splide-demo'>
            <x-slot:slideList>
                <x-frontend::plugin.splidecarousel.image slideSource='https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1736742796~exp=1736746396~hmac=da548f16932d587c0e21bf3605c37658fd011cf0f57a6812127799c9a24aefc1&w=1380' slideUrl='' slideDescription='' class='full-screen-slide'>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.video slideSource='https://videos.pexels.com/video-files/3195444/3195444-uhd_2560_1440_25fps.mp4' slideCover='' slideDescription='' class='full-screen-slide'>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.youtube slideSource='https://www.youtube.com/watch?v=Vs52kbeF090' slideDescription='' class='full-screen-slide'>
                </x-frontend>
            </x-slot>
            </x-frontend>
    </div>
    <div class="pb-12">
        <h1 class="text-center mb-2">Multiple Media Carousel</h1>
        <x-frontend::plugin.splidecarousel slideName='multiple-media-carousel'>
            <x-slot:slideList>
                <x-frontend::plugin.splidecarousel.image slideSource='https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' slideUrl='' slideDescription='' class=''>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.image slideSource='https://images.pexels.com/photos/673803/pexels-photo-673803.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' slideUrl='' slideDescription='' class=''>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.video slideSource='https://videos.pexels.com/video-files/3195444/3195444-uhd_2560_1440_25fps.mp4' slideCover='https://images.pexels.com/photos/709552/pexels-photo-709552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' slideDescription='' class='full-screen-slide'>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.youtube slideSource='https://www.youtube.com/watch?v=Vs52kbeF090' slideDescription='' class='full-screen-slide'>
                </x-frontend>
            </x-slot>
        </x-frontend>
    </div>
    <div class="pb-12">
        <h1 class="text-center mb-2">Multiple Items Carousel</h1>
        <x-frontend::plugin.splidecarousel slideName='multiple-items-carousel'>
            <x-slot:slideList>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <div class="card group hover:shadow sm:max-w-sm mx-auto mb-6">
                            <figure>
                                <img src="https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Shoes"
                                    class="transition-transform duration-500 group-hover:scale-110" />
                            </figure>
                            <div class="card-body">
                                <h5 class="card-title mb-2.5">Card title</h5>
                                <p class="mb-6">Nike Air Max is a popular line of athletic shoes that feature Nike's
                                    signature Air cushioning technology in the sole.</p>
                                <div class="card-actions">
                                    <button class="btn btn-primary">Buy Now</button>
                                    <button class="btn btn-secondary btn-soft">Add to cart</button>
                                </div>
                            </div>
                        </div>
                    </x-slot>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <div class="card group hover:shadow sm:max-w-sm mx-auto">
                            <figure>
                                <img src="https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Shoes"
                                    class="transition-transform duration-500 group-hover:scale-110" />
                            </figure>
                            <div class="card-body">
                                <h5 class="card-title mb-2.5">Card title</h5>
                                <p class="mb-6">Nike Air Max is a popular line of athletic shoes that feature Nike's
                                    signature Air cushioning technology in the sole.</p>
                                <div class="card-actions">
                                    <button class="btn btn-primary">Buy Now</button>
                                    <button class="btn btn-secondary btn-soft">Add to cart</button>
                                </div>
                            </div>
                        </div>
                    </x-slot>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <div class="card group hover:shadow sm:max-w-sm mx-auto">
                            <figure>
                                <img src="https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Shoes"
                                    class="transition-transform duration-500 group-hover:scale-110" />
                            </figure>
                            <div class="card-body">
                                <h5 class="card-title mb-2.5">Card title</h5>
                                <p class="mb-6">Nike Air Max is a popular line of athletic shoes that feature Nike's
                                    signature Air cushioning technology in the sole.</p>
                                <div class="card-actions">
                                    <button class="btn btn-primary">Buy Now</button>
                                    <button class="btn btn-secondary btn-soft">Add to cart</button>
                                </div>
                            </div>
                        </div>
                    </x-slot>
                </x-frontend>
                <x-frontend::plugin.splidecarousel.item>
                    <x-slot:slideItem>
                        <div class="card group hover:shadow sm:max-w-sm mx-auto">
                            <figure>
                                <img src="https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Shoes"
                                    class="transition-transform duration-500 group-hover:scale-110" />
                            </figure>
                            <div class="card-body">
                                <h5 class="card-title mb-2.5">Card title</h5>
                                <p class="mb-6">Nike Air Max is a popular line of athletic shoes that feature Nike's
                                    signature Air cushioning technology in the sole.</p>
                                <div class="card-actions">
                                    <button class="btn btn-primary">Buy Now</button>
                                    <button class="btn btn-secondary btn-soft">Add to cart</button>
                                </div>
                            </div>
                        </div>
                    </x-slot>
                </x-frontend>
            </x-slot>
        </x-frontend>
    </div>
    <div class="pb-12">
        <h1 class="text-center mb-2">Showcase Carousel</h1>
        @php
            $slideDatas = [
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail2.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail3.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail4.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail5.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail6.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail3.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail1.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
                    [
                        'type' => 'image',
                        'src' => 'https://somconnect.dev-new.nd.co.th//modules/frontend/img/product-detail2.jpg',
                        'alt' => 'thumbnail Slide',
                        'url' => '#',
                    ],
            ];   
        @endphp
        <div class="flex gap-4 justify-center">
            <div class="w-full md:w-1/2 lg:w-1/3 2xl:w-1/4">
                <div class="com-carousel-thumbnail">
                    <section id="main-carousel" class="splide no-drag relative">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach ($slideDatas as $item)
                                    <li class="splide__slide">
                                        <div class="slide-item rounded-2xl overflow-hidden shadow-md">
                                            <div class="zoomify">
                                                <img class="starting-image" class="rounded-2xl" src="{{ $item['src'] }}" alt="{{ $item['alt'] }}">
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                        </div>
                    </section>
                    <section id="thumbnail-carousel" class="splide mt-6">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach ($slideDatas as $item)
                                    <li class="splide__slide rounded-2xl overflow-hidden flex items-center ">
                                        <div class="slide-item">
                                            <img class="rounded-2xl" src="{{ $item['src'] }}" alt="{{ $item['alt'] }}">
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                    </section>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
@endsection

@section('scripts')
    @vite('resources/views/demo/scripts/splide-carousel.js','build-frontend')
@endsection