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

@section('style')
    <style>
        .title-video {
            width: 100%;
        }
    </style>
@endsection

@section('content')

    <main>
        <section class="splide banner-slide">
            <div class="splide__track">
                <ul class="splide__list">
                    @if (!empty($pageInit['pbanner']) && count($pageInit['pbanner']) > 0)
                        @foreach ($pageInit['pbanner'] as $banner)
                            @if ($banner->type == 1)
                                <li class="splide__slide f-link">
                                    {{-- Desktop --}}
                                    <img src="{{ convert_image($banner->image, 'banner') }}" />

                                    {{-- Mobile --}}
                                    <img src="{{ convert_image($banner->image_mobile, 'banner') }}" />
                                    @if (!empty($banner->url))
                                        <a href="{{ $banner->url }}" target="blank" class="f-url"></a>
                                    @endif
                                </li>
                            @else
                                @if ($banner->video_type == 1)
                                    @if (CheckFileInServer($banner->image))
                                        <li class="splide__slide" data-splide-html-video="{{ asset($banner->image) }}">
                                            <video class="title-video" loop muted autoplay playsinline>
                                                <source src="{{ asset($banner->image) }}" type="video/mp4">
                                            </video>
                                        </li>
                                    @endif
                                @else
                                    <li class="splide__slide" data-splide-youtube="{{ $banner->image_3 }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1">
                                        <video class="title-video" loop muted autoplay playsinline>
                                            <source src="{{ $banner->image_3 }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1" type="video/mp4">
                                        </video>
                                    </li>
                                @endif
                            @endif
                        @endforeach
                    @endif
                </ul>
            </div>
        </section>

        {{-- Section : Lastest Item --}}
        @if (!empty($pageInit['pproduct']) && count($pageInit['pproduct']) > 0)
            <div class="container pb-6 lg:pb-10">
                <div class="flex items-center justify-center flex-col">
                    <h2 class="title-text --spacing">@lang('frontend.frnd_30') </h2>
                </div>
                <section class="splide home-product-slide">
                    <div class="splide__track">
                        <ul class="splide__list">
                            @foreach ($pageInit['pproduct'] as $k => $product)
                                <li class="splide__slide">
                                    <div class="tips-card tips-product">
                                        @if (!empty($product->items_only) && !empty($product->items_only[0]->images))
                                            <div class="tips-img">
                                                <img src="{{ convert_image(json_decode($product->items_only[0]->images)[0]->image ?? '', 'wheretobuy') }}"
                                                    alt="" />
                                            </div>
                                        @else
                                            <div class="tips-img">
                                                <img src="{{ convert_image('test.jpg', 'wheretobuy') }}" alt="" />
                                            </div>
                                        @endif
                                        <a
                                            href="{{ mwz_route('frontend.jewelry.detail', [create_slug($product), 'cat' => $product->category_id]) }}"></a>
                                        @if (!empty($product->status_new))
                                            @if (!empty($product->labels))
                                                <p class="tips-tag">
                                                    @foreach (json_decode($product->labels) as $item)
                                                        {{ $item->title }}
                                                    @endforeach
                                                </p>
                                            @endif
                                        @endif
                                        <div class="wishlist-container">

                                            @if (Auth::guard('member')->check())
                                                <div class="the-heart {{ check_wishlist($product->id) }}"
                                                    onclick="change_wishlist(this,{{ $product->id }})">
                                                    <img class="heart-line"
                                                        src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                                        alt="" loading="lazy" />
                                                    <img class="heart-full"
                                                        src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}"
                                                        alt="" loading="lazy" />
                                                </div>
                                            @else
                                                <div class="the-heart" data-bs-toggle="modal"
                                                    data-bs-target="#loginNotiModal">
                                                    <img class="heart-line"
                                                        src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                                        alt="" loading="lazy" />
                                                    <img class="heart-full"
                                                        src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}"
                                                        alt="" loading="lazy" />
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </section>
            </div>
        @endif
        {{-- ใส่ BG หรือ Video ก็ได้ --}}
        @if (!empty($pageInit['pbanner_page1']) && $pageInit['pbanner_page1']->status == 1)
            @if ($pageInit['pbanner_page1']->type == 2)
                @if (!empty($pageInit['pbanner_page1']->video_1))
                    <video width="100%" autoplay controls class="">
                        <source src="{{ $pageInit['pbanner_page1']->video_1 ?? '' }}" type="video/mp4">
                    </video>
                @endif
            @elseif ($pageInit['pbanner_page1']->type == 3)
                @if (!empty($pageInit['pbanner_page1']->link_1))
                    {{-- ถ้าเป็น Youtube iframe เติม "?rel=0&autoplay=1&mute=1" หลังURLให้ด้วย ให้มันเล่นอัตโนมัติ --}}

                    <div class="bg-default bg-or-vid-asp mobile-banner">
                        <iframe width="560" height="315"
                            src="{{ $pageInit['pbanner_page1']->link_1 ?? '' }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                    </div>

                    <div class="bg-default bg-or-vid-asp">
                        <iframe width="560" height="315"
                            src="{{ $pageInit['pbanner_page1']->link_1 ?? '' }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                    </div>
                @endif
            @else
                @if (!empty($pageInit['pbanner_page1']->image_1))
                    <a
                        href="{{ !empty($pageInit['pbanner_page1']['link_1']) ? $pageInit['pbanner_page1']['link_1'] : 'javascript:void(0)' }}">

                        <div class="bg-default bg-or-vid-asp mobile-banner"
                            style="background-image:url({{ convert_image($pageInit['pbanner_page1']->image_mobile ?? '', 'banner') }})">
                        </div>

                        <div class="bg-default bg-or-vid-asp"
                            style="background-image:url({{ convert_image($pageInit['pbanner_page1']->image_1 ?? '', 'banner') }})">
                        </div>

                    </a>
                @endif
            @endif

            </div>
        @endif

        {{-- Section : Blog --}}
        @if (!empty($pageInit['banner_ads']))
            <div class="container py-4">
                <div class="row justify-center">
                    @foreach ($pageInit['banner_ads'] as $index => $tips)
                        @if ($index <= 1)
                            <div class="col-sm-6 col-lg-4 py-2">
                                <div class="tips-card">
                                    @if ($tips->type == 1)
                                        <div class="tips-img">
                                            <img src="{{ convert_image($tips->image ?? '', 'tipsandtrend') }}"
                                                alt="" />
                                        </div>
                                    @elseif($tips->type == 2)
                                        <video width="100%" autoplay controls muted class="">
                                            <source src="{{ $tips->image_2 ?? '' }}" type="video/mp4">
                                        </video>
                                    @else
                                        {!! $tips->image_3 ?? '' !!}
                                    @endif
                                    <div class="tips-detail text-center">
                                        <div class="tips-detail-title">{{ $tips['name_' . $pageInit['lang']] ?? '' }}</div>
                                        <div class="tips-detail-subtitle">
                                            {{ $tips['description_' . $pageInit['lang']] ?? '' }}</div>
                                        <div class="tips-detail-extra">
                                            <div class="caption-act inline-block">
                                                <div class="butn-mani text-text">@lang('frontend.frnd_31')</div>
                                            </div>
                                        </div>
                                    </div>
                                    @if (!empty($tips['url']))
                                        <a href="{{ $tips['url'] ?? '' }}"></a>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="row justify-center">
                    @foreach ($pageInit['banner_ads'] as $index => $tips)
                        @if ($index >= 2)
                            <div class="col-sm-6 col-lg-4 py-2">
                                <div class="tips-card">
                                    @if ($tips->type == 1)
                                        <div class="tips-img">
                                            <img src="{{ convert_image($tips->image ?? '', 'tipsandtrend') }}"
                                                alt="" />
                                        </div>
                                    @elseif($tips->type == 2)
                                        <video width="100%" autoplay controls muted class="">
                                            <source src="{{ $tips->image_2 ?? '' }}" type="video/mp4">
                                        </video>
                                    @else
                                        <video class="title-video">
                                            <source src="{{ $tips->image_3 }}" type="video/mp4">
                                        </video>
                                    @endif
                                    <div class="tips-detail text-center">
                                        <div class="tips-detail-title">{{ $tips['name_' . $pageInit['lang']] ?? '' }}
                                        </div>
                                        <div class="tips-detail-subtitle">
                                            {{ $tips['description_' . $pageInit['lang']] ?? '' }}</div>
                                        <div class="tips-detail-extra">
                                            <div class="caption-act inline-block">
                                                <div class="butn-mani text-text">@lang('frontend.frnd_31')</div>
                                            </div>
                                        </div>
                                    </div>
                                    @if (!empty($tips['url']))
                                        <a href="{{ $tips['url'] ?? '' }}"></a>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
        {{-- ใส่ BG หรือ Video ก็ได้ --}}
        @if (!empty($pageInit['pbanner_page2']) && $pageInit['pbanner_page2']->status == 1)
            @if ($pageInit['pbanner_page2']->type == 2)
                <video width="100%" autoplay controls class="">
                    <source src="{{ $pageInit['pbanner_page2']->video_1 ?? '' }}" type="video/mp4">
                </video>
            @elseif ($pageInit['pbanner_page2']->type == 3)
                {{-- ถ้าเป็น Youtube iframe เติม "?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1" หลังURLให้ด้วย ให้มันเล่นอัตโนมัติกับอื่น ๆ --}}

                <div class="bg-default bg-or-vid-asp mobile-banner">
                    <iframe width="100%" height="315"
                        src="{{ $pageInit['pbanner_page2']->link_1 ?? '' }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>

                <div class="bg-default bg-or-vid-asp">
                    <iframe width="100%" height="315"
                        src="{{ $pageInit['pbanner_page2']->link_1 ?? '' }}?rel=0&autoplay=1&mute=1&controls=0&&showinfo=0&loop=1"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>
            @else
                @if (!empty($pageInit['pbanner_page2']->image_1))
                    <a
                        href="{{ !empty($pageInit['pbanner_page2']['link_1']) ? $pageInit['pbanner_page2']['link_1'] : 'javascript:void(0)' }}">

                        <div class="bg-default bg-or-vid-asp mobile-banner"
                            style="background-image:url({{ convert_image($pageInit['pbanner_page2']->image_mobile ?? '', 'banner') }})">
                        </div>

                        <div class="bg-default bg-or-vid-asp"
                            style="background-image:url({{ convert_image($pageInit['pbanner_page2']->image_1 ?? '', 'banner') }})">
                        </div>

                    </a>
                @endif
            @endif
            </div>
        @endif

        {{-- Section : Lastest Item --}}
        @if (!empty($pageInit['pcategory']))
            <div class="container lg:pb-6">
                <div class="flex items-center justify-center flex-col">
                    <h2 class="title-text --spacing">@lang('frontend.frnd_32')</h2>
                </div>
                <section class="splide home-product-slide2">
                    <div class="splide__track">
                        <ul class="splide__list">
                            @foreach ($pageInit['pcategory'] as $category)
                                <li class="splide__slide">
                                    <div class="tips-card tips-product">
                                        <div class="tips-img">
                                            <img src="{{ convert_image($category->image ?? '', 'wheretobuy') }}"
                                                alt="" />
                                        </div>
                                        <a href="{{ mwz_route('frontend.jewelry', [create_slug($category)]) }}"></a>
                                        <p class="tips-tag">{{ !empty($category->status_new) ? 'NEW' : '' }} </p>
                                        <div class="wishlist-container">

                                            {{-- กรณียังไม่ล็อกอิน จะมี  data-bs-toggle="modal" data-bs-target="#loginNotiModal" ใช้เรียก Modal --}}
                                            {{-- <div class="the-heart" data-bs-toggle="modal" data-bs-target="#loginNotiModal">
                                                <img class="heart-line" src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}" alt="" />
                                                <img class="heart-full" src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}" alt="" />
                                            </div> --}}
                                        </div>
                                    </div>
                                    <h5 class="text-center mt-3">{{ $category['name_' . $pageInit['lang']] ?? '' }}</h5>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </section>
            </div>
        @endif
    </main>
@endsection

@section('script')

    <script>
        oneSlideMount('.banner-slide', {
            autoplay: true,
            muted: true
        }, {
            autoplay: true,
            muted: true
        })
        if ({{ count($pageInit['pproduct']) }} > 0) {
            productItemMount('.home-product-slide')
        }
        productItemMount('.home-product-slide2')
    </script>

@endsection