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

@section('style')

@endsection

@section('content')

    <main>
        <div class="bg-gray-lighter">
            <div class="bg-gray-darkest py-8 xl:py-16 relative ">
                <div class="the-container relative z-10 breadcrumb-center">
                    <!-- คลาส mobile-dc จะมีเฉพาะใน loop รองสุดท้าย-->
                    <div class="brcrmb">
                        <div class="brcrmb-wrrp">
                            <a href="{{ mwz_route('frontend.index') }}">{{ __('frontend.home') }}</a>
                        </div>
                        <div class="brcrmb-wrrp">
                            <div class="tmx-2 mobile-dc"><span class="slh">/ </span>
                                <!-- Mobile Icon-->
                                <a class="chv mobile-dc"
                                    href="{{ mwz_route('frontend.product', [$product['tag']['id'], '']) }}"><svg
                                        xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 chv" viewBox="0 0 20 20"
                                        fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                            clip-rule="evenodd" />
                                    </svg></a>
                            </div>
                            <a class="mobile-dc"
                                href="{{ mwz_route('frontend.product', [$product['tag']['id'], '']) }}">
                                {{ !empty($product['tag']['name']) ? $product['tag']['name'] : '' }}

                            </a>
                        </div>
                        <div class="brcrmb-wrrp">
                            <div class="tmx-2"><span class="slh">/ </span>
                            </div>
                            <a href="{{ mwz_route('frontend.product', [$product['tag']['id'], '']) }}">
                                {{ !empty($product['tag_1']['name']) ? $product['tag_1']['name'] : '' }}
                            </a>
                        </div>
                        <div class="brcrmb-wrrp">
                            <div class="tmx-2 mobile-dc" style="margin-left: 0.5rem;margin-right: 0.5rem;"><span>/</span>
                            </div>
                            <a class="mobile-dc"
                                href="{{ mwz_route('frontend.product', [$product['tag_2']['id'], '']) }}">
                                {{ !empty($product['tag_2']['name']) ? $product['tag_2']['name'] : '' }}

                            </a>
                        </div>
                        <div class="brcrmb-wrrp active">
                            <div class="tmx-2"><span class="slh">/ </span>
                            </div>
                            <a>
                                {{ !empty($product['name']) ? $product['name'] : '' }}

                            </a>
                        </div>
                    </div>
                </div>
                <img class="brand-lf" src="{{ Module::asset('frontend:img/brand.svg') }}" alt="Alternate Text" />
            </div>
            <div class="py-6 bg-gray-darkest">
                <div class="the-container">
                    <div class="prod-showcase xl:flex">
                        @if (!empty($product['image']))
                            <div class="splide flex-1 xl:order-2">
                                <div class="splide" id="main-slider">
                                    <div class="splide__track">
                                        <div class="splide__list">

                                            @foreach ($product['image'] as $item)
                                                <div class="splide__slide">
                                                    <img src="{{ check_image($item['src']) }}" alt="Alternate Text" />
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="thumbnails xl:flex-col xl:space-y-2 xl:order-1" id="thumbnails">
                                @if (count($product['image']) > 1)
                                    @foreach ($product['image'] as $item)
                                        <div class="thumbnail">
                                            <img src="{{ check_image($item['src']) }}" alt="Alternate Text" />
                                        </div>
                                    @endforeach
                                @endif
                                
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="py-8 bg-black">
                <div class="the-container">
                    <div class="text-center mb-6">
                        <h2 class="text-xl md:text-3xl text-white font-bold">
                            {{ !empty($product['name']) ? $product['name'] : '' }}
                        </h2>
                        <h2 class="text-lg md:text-xl text-white">
                            {{ !empty($product['size']) ? 'Size(s) : ' . $product['size']  : '' }}
                        </h2>
                    </div>
                    <div class="content-container">
                        <div class="md:px-16 lg:px-24 mx-auto text-center">
                            <p class="text-white">
                                {!! !empty($product['desc']) ? $product['desc'] : '' !!}
                            </p>
                        </div>
                        <div class="text-center my-6">
                            <a class="butn-2nd text-white text-lg" href="{{ mwz_route('frontend.contact') }}">
                                <div class="txt">{{ __('frontend.contact_us') }}</div>
                            </a>
                        </div>
                    </div>
                    <div class="tabs-wrapper bg-gray-darkest">
                        <div class="tabs-product-container">
                            <nav class="infn-tabs-navs hidden sm:flex">
                                <button class="nf-tab active"
                                    data-target="product-detail-0">{{ __('frontend.order_descritipon') }}</button>
                                <button class="nf-tab"
                                    data-target="product-detail-1">{{ __('frontend.order_benefit') }}</button>
                            </nav>
                            <div class="form-wrapper infn-selector-navs sm:hidden">
                                <select class="form-style" name="selectName" onchange="onTabChange(this);">
                                    <option value="product-detail-0">{{ __('frontend.order_descritipon') }}</option>
                                    <option value="product-detail-1">{{ __('frontend.order_benefit') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="tabs-product-content">
                            <div class="infn-tab-content product-detail-0 active">
                                <div class="content-container">
                                    {!! !empty($product['description']) ? $product['description'] : '' !!}

                                </div>
                            </div>
                            <div class="infn-tab-content product-detail-1 ">
                                <div class="content-container">
                                    {!! !empty($product['benefit']) ? $product['benefit'] : '' !!}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        splider()
        const tabs = document.querySelectorAll(".infn-tabs-navs");
        const tab = document.querySelectorAll(".nf-tab");
        const panel = document.querySelectorAll(".infn-tab-content");

        function onTabClick(event) {

            for (let i = 0; i < tab.length; i++) {
                tab[i].classList.remove("active");
            }

            for (let i = 0; i < panel.length; i++) {
                panel[i].classList.remove("active");
            }

            event.target.classList.add('active');
            let classString = event.target.getAttribute('data-target');
            document.getElementsByClassName(classString)[0].classList.add("active");
            document.querySelector('.infn-selector-navs [value="' + classString + '"]').selected = true;
        }

        function onTabChange(event) {

            for (let i = 0; i < tab.length; i++) {
                tab[i].classList.remove("active");
            }

            for (let i = 0; i < panel.length; i++) {
                panel[i].classList.remove("active");
            }

            let classString = event.value;
            document.getElementsByClassName(classString)[0].classList.add("active");
            document.querySelector(".nf-tab[data-target='" + classString + "']").classList.add("active");

        }

        for (let i = 0; i < tab.length; i++) {
            tab[i].addEventListener('click', onTabClick, false);
        }
    </script>
    <script src="{{ mix('js/frontend.js') }}"></script>
@endsection