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

@section('style')
    <style>
        .owl-carousel .owl-item img {
            min-width: 57px;
            min-height: 57px;
        }

        button:disabled {
            pointer-events: none;
            opacity: 0.4;
        }
    </style>
@endsection

@section('content')

    <main>
        <input type="hidden" id="cat_id" value="{{ !empty($data['cat_id']) ? $data['cat_id'] : '' }}">
        {{-- Section : Banner --}}
        @if (!empty($data['banner']['image_banner_mobile']))
            <div class="bg-1st banner-section-spacing mobile-banner"
                style="background-image: url({{ convert_image($data['banner']['image_banner_mobile'] ?? '', 'wheretobuy') }})">
            </div>
        @endif
        @if (!empty($data['banner']['image_banner']))
            <div class="bg-1st banner-section-spacing"
                style="background-image: url({{ convert_image($data['banner']['image_banner'] ?? '', 'wheretobuy') }})">

            </div>
        @endif
        {{-- Section : Product --}}

        <div class="container py-6 lg:pt-12">
            <div class="row justify-center">
                <div class="pb-6 lg:pb-12 col-12 col-md-11 col-lg-9">
                    <div class="nav-state-wrapper">
                        <div class="nav-state-bar preserv ">@lang('frontend::lang.wedding_select_01')
                            <a href="javascript:backToLastPage('oldurl-wedding')"></a>
                        </div>
                        <div class="nav-state-bar preserv ">@lang('frontend::lang.wedding_select_02')
                            <a href="javascript:void(0)"></a>
                        </div>
                        <div class="nav-state-bar activated current">@lang('frontend::lang.wedding_select_03')
                            <a href="javascript:void(0)"></a>
                        </div>
                    </div>
                </div>
            </div>
            <form id="frm_addtocart" onsubmit="addtocart(); return false;">
                @csrf
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row justify-center">
                            <div class="col-12">
                                <div class="row md:mb-6 mt-6 md:mt-0">
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6 lg:px-16">
                                        <hr />
                                        <div class="flex items-center justify-between">
                                            <div class="text-3xl font-medium my-4">@lang('frontend::lang.product_detail_15')</div>
                                            <button type="button"
                                                class="bg-gray-darkest p-2 text-white butn-couple-selector"
                                                id="btn_cancel">@lang('frontend.cancel_delete')</button>
                                        </div>
                                        <hr />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6" id="p-image">
                                <div class="thumb-gallery-wrapper">
                                    <div id="image_show"></div>
                                    <div id="image_loop"></div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-5" id="p-detail">
                                <div class="summary entry-summary position-relative">
                                    <div class="text-3xl font-medium">{{ $product["name_$lang"] ?? '' }}</div>
                                    @if (!empty($data['set_certi_m']['certificate']))
                                        <div class="text-xl font-light">@lang('frontend.frnd_40'):
                                            {{ $data['set_certi_m']['certificate'] }}</div>
                                    @endif
                                    {{-- @if (!empty($data['category_menu_m']['cat_name']))
                                        <div class="text-xl font-light">@lang('frontend.categories'):
                                            {{ $data['category_menu_m']['cat_name'] ?? '' }}</div>
                                    @endif --}}
                                    @if (!empty($result_item['body_type']))
                                        <div class="text-xl font-light">
                                            @if (!empty($result_item['show_name_color']))
                                                <hh id="get_housing">{{ $result_item['body_type'] ?? '' }}</hh>
                                                <g id="get_color">{{ ' ' . $result_item['show_name_color'] }}</g>
                                            @else
                                                <hh id="get_housing">{{ $result_item['body_type'] ?? '' }}</hh>
                                                <g id="get_color">{{ $result_item['color'][0]['name'] ?? '' }}</g>
                                            @endif
                                        </div>
                                    @endif
                                    <div class="pt-6 pdt">
                                        <div class="html-price">
                                            @if ($price['discount_type'])
                                                <p class="dis-dash">{{ number_format($price['old_price'], 2) }}</p>
                                                <p class="the-price-card">
                                                    <span class="prc">THB {{ number_format($price['total_price'], 2) }}
                                                    </span>
                                                    <span class="red">
                                                        (@lang('frontend.save'){{ $price['discount_percent'] }}%)</span>
                                                </p>
                                                <hr class="my-3" />
                                            @else'
                                                <p class="dis-dash"></p>
                                                <p class="the-price-card">
                                                    <span class="prc">THB
                                                        {{ number_format($price['total_price'], 2) }} </span>
                                                </p>
                                                <hr class="my-3" />
                                            @endif
                                        </div>

                                        {{-- Color product --}}
                                        @if (!empty($result_item['color']) && count($result_item['color']) > 0)
                                            <div class="flex items-center justify-between">
                                                <div class="ityp">
                                                    <p>@lang('frontend.frnd_46')</p>
                                                </div>
                                                <div class="cmt">
                                                    <i>@lang('frontend::lang.product_detail_01')</i>
                                                    <i class="fa fa-exclamation"></i>
                                                    <a href="{{ mwz_route('frontend.detail.body') }}"> </a>
                                                </div>
                                            </div>
                                            <div class="color-chooser my-3">
                                                                                                @foreach ($result_item['color'] as $index => $color)
                                                    <div class="color-blk">
                                                        <input onchange="change_color(this.value,'{{ $product->id }}')"
                                                            id="color-{{ $index }}" type="radio" name="color"
                                                            value="{{ $color['color'] ?? '' }}"
                                                            {{ $cs == $index ? 'checked' : '' }} />
                                                        <label for="color-{{ $index }}"
                                                            style="background-color: {{ $color['code'] ?? '#ffffff' }}">{{ $color['name'] ?? '' }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        {{-- Center Diamond --}}
                                        @if (!empty($result_item['diamond']) && count($result_item['diamond']) > 0)
                                            <div class="flex items-center justify-between">
                                                <div class="ityp">
                                                    <p>@lang('frontend.frnd_45') </p>
                                                </div>
                                            </div>
                                            <div class="color-chooser mop-to-weight my-3" id="html-diamond">
                                                                                                @foreach ($result_item['diamond'] as $index => $diamond)
                                                    <div class="color-blk">
                                                        <input onchange="change_diamond(this.value,'{{ $product->id }}')"
                                                            id="weight-ST{{ $diamond['uid'] }}" type="radio"
                                                            name="weight" value="{{ $diamond['diamond'] ?? '' }}"
                                                            {{ $dm == $index ? 'checked' : '' }} />
                                                        <label
                                                            for="weight-ST{{ $diamond['uid'] }}">{{ $diamond['name'] ?? '' }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <hr class="mb-3" />
                                        @endif

                                        @if (
                                            (!empty($result_item['size']) && count($result_item['size']) > 0) ||
                                                (!empty($result_item['size_type']) && count($result_item['size_type']) > 0))
                                            <div class="flex items-center justify-between">
                                                <div class="ityp"> </div>
                                                <div class="cmt"> <i>@lang('frontend::lang.product_detail_02')</i><i
                                                        class="fa fa-exclamation"></i><a
                                                        href="{{ mwz_route('frontend.detail.size') }}"></a></div>
                                            </div>
                                            <button class="butn-blank" id="butn-blank-1" type="button">
                                                <div class="disp-tag" id="show_size">@lang('frontend.frnd_47')</div><i
                                                    class="fa fa-caret-down"></i>
                                            </button>
                                            <div class="toggle-size hidden" id="toggle-size-1">

                                                {{-- Size Product --}}
                                                @if (!empty($result_item['size']) && count($result_item['size']) > 0)
                                                    <div class="flex items-center justify-between">
                                                        <div class="ityp">
                                                            <p>@lang('frontend.frnd_48') </p>
                                                        </div>
                                                    </div>
                                                    <div class="color-chooser mop-to-weight my-3" id="html-size">
                                                        @foreach ($result_item['size'] as $index => $size)
                                                            <div class="color-blk">
                                                                <input
                                                                    onchange="change_size(this.value,'{{ $product->id }}')"
                                                                    id="size-ST{{ $size['uid'] }}" type="radio"
                                                                    name="size" value="{{ $size['size'] ?? '' }}"
                                                                    onclick="setSizeShow(this.value)"
                                                                    {{ $index == 0 ? 'checked' : '' }} />
                                                                <label
                                                                    for="size-ST{{ $size['uid'] }}">{{ $size['name'] ?? '' }}</label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                                @if (!empty($result_item['size_type']) && count($result_item['size_type']) > 0)
                                                    <div class="flex items-center justify-between">
                                                        <div class="ityp">
                                                            <p>@lang('frontend.frnd_49') </p>
                                                        </div>
                                                        <div class="ityp">
                                                            <p class="red">@lang('frontend::lang.product_detail_03') </p>
                                                        </div>
                                                    </div>
                                                    <div class="color-chooser mop-to-weight my-3">
                                                        @foreach ($result_item['size_type'] as $index => $szcus)
                                                            <div class="color-blk">
                                                                <input
                                                                    onchange="change_size(this.value,'{{ $product->id }}')"
                                                                    id="size-{{ $szcus['uid'] }}" type="radio"
                                                                    name="size" value="{{ $szcus['size'] ?? '' }}" />
                                                                <label data-bs-toggle="modal"
                                                                    data-bs-target="#outStockNotiModal"
                                                                    for="size-{{ $szcus['uid'] }}">{{ $szcus['name'] ?? '' }}</label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif

                                            </div>
                                        @endif
                                    </div>
                                </div>
                                @if (Auth::guard('member')->check())
                                    {{-- ล็อกอินแล้ว --}}
                                    <button style="display: none;" class="butn-submit add2bag-btn" type="submit"
                                        id="btn1submit">@lang('frontend::lang.product_detail_04')</button>
                                @else
                                    {{-- ยังไม่ล็อกอิน --}}
                                    <button style="display: none;" class="butn-submit add2bag-btn" type="button"
                                        id="btn1submit" data-bs-toggle="modal"
                                        data-bs-target="#loginNotiModal">@lang('frontend::lang.product_detail_04')</button>
                                @endif
                                <div class="flex items-center justify-around py-6">
                                    <div class="flex items-center relative link-icon-detail">
                                        <img src="{{ Module::asset('frontend:img/steam-mock-icon.svg') }}"
                                            alt="" />
                                        <p>{{ $pageInit['contact_page']->phone_head_office ?? '' }}</p>
                                        <a href="tel:{{ $pageInit['contact_page']->phone_head_office ?? '' }}"> </a>
                                    </div>
                                    <div class="flex items-center relative link-icon-detail">
                                        @if (Auth::guard('member')->check())
                                            @php
                                                $resv = check_wishlist($product->id ?? 0);
                                            @endphp
                                            <img class="heart-outline {{ !empty($resv) ? 'hidden' : '' }}"
                                                src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                                alt="" />
                                            <img class="heart-full heart-pink {{ !empty($resv) ? '' : 'hidden' }}"
                                                src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}"
                                                alt="" loading="lazy" />
                                            <p>@lang('frontend::lang.product_detail_12')</p>
                                            <a href="javascript:change_wishlist_detail({{ $product->id ?? 0 }})"></a>
                                        @else
                                            <img class="heart-outline"
                                                src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                                alt="" />
                                            <img class="heart-pink hidden"
                                                src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}"
                                                alt="" loading="lazy" />
                                            <p>@lang('frontend::lang.product_detail_12')</p>
                                            <a href="javascript:void(0)" data-bs-toggle="modal"
                                                data-bs-target="#loginNotiModal"></a>
                                        @endif
                                    </div>
                                </div>
                                <div id="set_content">
                                    <div class="nav tab-navnav" id="myTab" role="tablist">
                                        <div class="text-center pt-6 long-pk-brd active" id="home-tab"
                                            data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab"
                                            aria-controls="home-tab-pane" aria-selected="true">
                                            <p class="mb-0 desc-title">@lang('frontend::lang.product_detail_05')</p>
                                        </div>
                                        <div class="text-center pt-6 long-pk-brd" id="profile-tab" data-bs-toggle="tab"
                                            data-bs-target="#profile-tab-pane" role="tab"
                                            aria-controls="profile-tab-pane" aria-selected="false">
                                            <p class="mb-0 desc-title">@lang('frontend::lang.product_detail_06')</p>
                                        </div>
                                    </div>
                                    <div class="tab-content tab-contcont" id="myTabContent">
                                        <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                            aria-labelledby="home-tab" tabindex="0">
                                            <div class="text-editor">
                                                {{-- {!! mwz_getTextString($product["detail_$lang"] ?? '') !!} --}}
                                                <div class="row justify-content-around ps-4">
                                                    @if (!empty($product['code']))
                                                        <p>
                                                        <div class="col-4 col-lg-4">Model No.</div>
                                                        <div class="col-4 col-lg-4">{{ $product['code'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($sku_detail['pearl']))
                                                        <p>
                                                        <div class="col-4 col-lg-4">
                                                            {{ !empty($data['set_certi_m']['metal']) ? $data['set_certi_m']['metal'] : __('frontend::lang.detial_ring_00') }}
                                                        </div>
                                                        <div class="col-4 col-lg-4" id="get_pearl">
                                                            {{ $sku_detail['pearl'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($result_item['diamond'][0]['name']))
                                                        <p>
                                                        <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_01')</div>
                                                        <div class="col-4 col-lg-4">
                                                            {{ $result_item['diamond'][0]['name'] }}
                                                        </div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($data['set_certi_m']['certificate']))
                                                        <p>
                                                        <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_02')</div>
                                                        <div class="col-4 col-lg-4">
                                                            {{ $data['set_certi_m']['certificate'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($sku_detail['uncut']))
                                                        {{-- ทรง --}}
                                                        <p>
                                                        <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_03')</div>
                                                        <div class="col-4 col-lg-4" id="get_uncut">
                                                            {{ $sku_detail['uncut'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($sku_detail['shape']))
                                                        {{-- สี --}}
                                                        <p>
                                                        <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_04')</div>
                                                        <div class="col-4 col-lg-4" id="get_shap">
                                                            {{ $sku_detail['shape'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($sku_detail['cleanliness']))
                                                        <p>
                                                        <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_05')</div>
                                                        <div class="col-4 col-lg-4" id="get_cleanliness">
                                                            {{ $sku_detail['cleanliness'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($item_select->weight))
                                                        <p>
                                                        <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_07')</div>
                                                        <div class="col-4 col-lg-4" id="get_weight">
                                                            {{ $item_select->weight }}</div>
                                                        </p>
                                                    @endif
                                                    @if ($result_item['body_type'])
                                                        <p>
                                                        <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_08')</div>
                                                        <div class="col-4 col-lg-4" id="get_housing2">
                                                            {{ $result_item['body_type'] }}</div>
                                                        </p>
                                                    @endif
                                                    @if (!empty($item_select->width) && $item_select->width > 0)
                                                        <p>
                                                        <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_09')</div>
                                                        <div class="col-4 col-lg-4" id="get_width">
                                                            {{ $item_select->width }}</div>
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="row justify-content-center ps-4">
                                                    <p>
                                                    <div class="col-10 col-lg-10" id="get_another">{!! $sku_detail['another'] ?? '' !!}
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                            {{-- <div class="readmore-detail more-detail" id="more_1_tab_1">@lang('frontend::lang.product_detail_07')
                                            </div>
                                            <div class="showless-detail more-detail" id="close_1_tab_1">@lang('frontend::lang.product_detail_08') --}}
                                        </div>
                                    </div>
                                    <div class="tab-pane fade expanded" id="profile-tab-pane" role="tabpanel"
                                        aria-labelledby="profile-tab" tabindex="0">
                                        <div class="text-editor">
                                            {!! $sku_detail['description'] ?? '' !!}
                                        </div>
                                        {{-- <div class="readmore-detail more-detail" id="more_1_tab_2">@lang('frontend::lang.product_detail_07')
                                            </div>
                                            <div class="showless-detail more-detail" id="close_1_tab_2">@lang('frontend::lang.product_detail_08')
                                            </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="row justify-center">
                        <div class="col-12">
                            <div class="row md:mb-6 mt-6 md:mt-0">
                                <div class="col-md-6"></div>
                                <div class="col-md-6 lg:px-16">
                                    <hr />
                                    <div class="flex items-center justify-between">
                                        <div class="text-3xl font-medium my-4">@lang('frontend::lang.product_detail_14')</div>
                                        <button type="button" class="bg-gray-darkest p-2 text-white butn-couple-selector"
                                            id="btn_cancel2">@lang('frontend.cancel_delete')</button>
                                    </div>
                                    <hr />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6" id="p-image2">
                            <div class="thumb-gallery-wrapper">
                                <div id="image_show2"></div>
                                <div id="image_loop2"></div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-5" id="p-detail2">
                            <div class="summary entry-summary position-relative">
                                <div class="text-3xl font-medium">{{ $product2["name_$lang"] ?? '' }}</div>
                                @if (!empty($data['set_certi_w']['certificate']))
                                    <div class="text-xl font-light">@lang('frontend.frnd_40'):
                                        {{ $data['set_certi_w']['certificate'] }}</div>
                                @endif
                                {{-- @if (!empty($data['category_menu_w']['cat_name']))
                                        <div class="text-xl font-light">@lang('frontend.categories'):
                                            {{ $data['category_menu_w']['cat_name'] ?? '' }}</div>
                                    @endif --}}
                                @if (!empty($result_item2['body_type']))
                                    <div class="text-xl font-light">
                                        @if (!empty($result_item2['show_name_color']))
                                            <hh id="get_housing_2">{{ $result_item2['body_type'] ?? '' }}</hh>
                                            <g id="get_color2">{{ ' ' . $result_item2['show_name_color'] }}</g>
                                        @else
                                            <hh id="get_housing_2"> {{ $result_item2['body_type'] ?? '' }}</hh>
                                            <g id="get_color2">{{ $result_item2['color'][0]['name'] ?? '' }}</g>
                                        @endif
                                    </div>
                                @endif
                                <div class="pt-6 pdt">
                                    <div class="html-price2">
                                        @if ($price2['discount_type'])
                                            <p class="dis-dash">{{ number_format($price2['old_price'], 2) }}</p>
                                            <p class="the-price-card"><span class="prc">THB
                                                    {{ number_format($price2['total_price'], 2) }} </span><span
                                                    class="red">(@lang('frontend.save')
                                                    {{ $price2['discount_percent'] }}%)</span></p>
                                            <hr class="my-3" />
                                        @else
                                            <p class="dis-dash"></p>
                                            <p class="the-price-card"><span class="prc">THB
                                                    {{ number_format($price2['total_price'], 2) }} </span></p>
                                            <hr class="my-3" />
                                        @endif
                                    </div>

                                    {{-- Color product --}}
                                    @if (!empty($result_item2['color']) && count($result_item2['color']) > 0)
                                        <div class="flex items-center justify-between">
                                            <div class="ityp">
                                                <p>@lang('frontend.frnd_46') {{-- -&nbsp;<span class="itp-1">18k </span>/ <span class="itp-2">Rose Gold</span> --}}</p>
                                            </div>
                                            <div class="cmt"> <i>@lang('frontend::lang.product_detail_01')</i><i
                                                    class="fa fa-exclamation"></i><a href="#"> </a></div>
                                        </div>

                                        <div class="color-chooser my-3">
                                                                                        @foreach ($result_item2['color'] as $index => $color)
                                                <div class="color-blk">
                                                    <input onchange="change_color2(this.value,'{{ $product2->id }}')"
                                                        id="color2-{{ $index }}" type="radio" name="color2"
                                                        value="{{ $color['color'] ?? '' }}"
                                                        {{ $cs == $index ? 'checked' : '' }} />
                                                    <label for="color2-{{ $index }}"
                                                        style="background-color: {{ $color['code'] ?? '#ffffff' }}">{{ $color['name'] ?? '' }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    {{-- Center Diamond --}}
                                    @if (!empty($result_item2['diamond']) && count($result_item2['diamond']) > 0)
                                        <div class="flex items-center justify-between">
                                            <div class="ityp">
                                                <p>@lang('frontend.frnd_45') </p>
                                            </div>
                                        </div>
                                        <div class="color-chooser mop-to-weight my-3">
                                                                                        @foreach ($result_item2['diamond'] as $index => $diamond)
                                                <div class="color-blk">
                                                    <input onchange="change_diamond2(this.value,'{{ $product2->id }}')"
                                                        id="weight2-ST{{ $index }}" type="radio" name="weight2"
                                                        value="{{ $diamond['diamond'] ?? '' }}"
                                                        {{ $dm2 == $index ? 'checked' : '' }} />
                                                    <label for="weight2-ST{{ $index }}">
                                                        {{ $diamond['name'] ?? '' }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                        <hr class="mb-3" />
                                    @endif

                                    <div class="flex items-center justify-between">
                                        <div class="ityp"> </div>
                                        <div class="cmt"> <i>@lang('frontend::lang.product_detail_02')</i><i class="fa fa-exclamation"></i><a
                                                href="#"></a></div>
                                    </div>
                                    <button class="butn-blank" id="butn-blank-2" type="button">
                                        <div class="disp-tag" id="show_size2" of="male">@lang('frontend::lang.product_detail_13')</div>
                                        <i class="fa fa-caret-down"></i>
                                    </button>
                                    <div class="toggle-size2 hidden" id="toggle-size-2">

                                        {{-- Size Product --}}
                                        @if (!empty($result_item2['size']) && count($result_item2['size']) > 0)
                                            <div class="flex items-center justify-between">
                                                <div class="ityp">
                                                    <p>@lang('frontend.frnd_48') </p>
                                                </div>
                                            </div>
                                            <div class="color-chooser mop-to-weight my-3">
                                                @foreach ($result_item2['size'] as $index => $size)
                                                    <div class="color-blk">
                                                        <input onchange="change_size2(this.value,'{{ $product2->id }}')"
                                                            id="size2-ST{{ $size['uid'] }}" type="radio"
                                                            name="size2" value="{{ $size['size'] ?? '' }}"
                                                            {{ $index == 0 ? 'checked' : '' }} />
                                                        <label
                                                            for="size2-ST{{ $size['uid'] }}">{{ $size['name'] ?? '' }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        @if (!empty($result_item2['size_type']) && count($result_item2['size_type']) > 0)
                                            <div class="flex items-center justify-between">
                                                <div class="ityp">
                                                    <p>@lang('frontend.frnd_49') </p>
                                                </div>
                                                <div class="ityp">
                                                    <p class="red">@lang('frontend::lang.product_detail_03') </p>
                                                </div>
                                            </div>
                                            <div class="color-chooser mop-to-weight my-3">
                                                @foreach ($result_item2['size_type'] as $index => $szcus)
                                                    <div class="color-blk">
                                                        <input onchange="change_size2(this.value,'{{ $product2->id }}')"
                                                            id="size2-{{ $szcus['uid'] }}" type="radio" name="size2"
                                                            value="{{ $szcus['size'] ?? '' }}"
                                                            onclick="setSizeShow2(this.value)" />
                                                        <label data-bs-toggle="modal" data-bs-target="#outStockNotiModal"
                                                            for="size2-{{ $szcus['uid'] }}">{{ $szcus['name'] ?? '' }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @if (Auth::guard('member')->check())
                                {{-- ล็อกอินแล้ว --}}
                                <button class="butn-submit add2bag-btn" type="submit"
                                    id="btn2submit">@lang('frontend::lang.product_detail_04')</button>
                            @else
                                {{-- ยังไม่ล็อกอิน --}}
                                <button class="butn-submit add2bag-btn" type="button" id="btn2submit"
                                    data-bs-toggle="modal" data-bs-target="#loginNotiModal">@lang('frontend::lang.product_detail_04')</button>
                            @endif
                            <div class="flex items-center justify-around py-6">
                                <div class="flex items-center relative link-icon-detail">
                                    <img src="{{ Module::asset('frontend:img/steam-mock-icon.svg') }}" alt="" />
                                    <p>{{ $pageInit['contact_page']->phone_head_office ?? '' }}</p>
                                    <a href="tel:{{ $pageInit['contact_page']->phone_head_office ?? '' }}"> </a>
                                </div>
                                <div class="flex items-center relative link-icon-detail">
                                    @if (Auth::guard('member')->check())
                                        @php
                                            $resv = check_wishlist($product2->id ?? 0);
                                        @endphp
                                        <img class="heart-outline2 {{ !empty($resv) ? 'hidden' : '' }}"
                                            src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                            alt="" />
                                        <img class="heart-full heart-pink2 {{ !empty($resv) ? '' : 'hidden' }}"
                                            src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}" alt=""
                                            loading="lazy" />
                                        <p>@lang('frontend::lang.product_detail_12')</p>
                                        <a href="javascript:change_wishlist_detail({{ $product2->id ?? 0 }},2)"></a>
                                    @else
                                        <img class="heart-outline2"
                                            src="{{ Module::asset('frontend:img/icon/heart-outline.png') }}"
                                            alt="" />
                                        <img class="heart-pink2 hidden"
                                            src="{{ Module::asset('frontend:img/icon/heart-pink.png') }}" alt=""
                                            loading="lazy" />
                                        <p>@lang('frontend::lang.product_detail_12')</p>
                                        <a href="javascript:void(0)" data-bs-toggle="modal"
                                            data-bs-target="#loginNotiModal"></a>
                                    @endif
                                </div>
                            </div>
                            <div id="set_content1">
                                <div class="nav tab-navnav" id="myTab1" role="tablist">
                                    <div class="text-center pt-6 long-pk-brd active" id="home-tab1" data-bs-toggle="tab"
                                        data-bs-target="#home-tab-pane1" role="tab" aria-controls="home-tab-pane1"
                                        aria-selected="true">
                                        <p class="mb-0 desc-title">@lang('frontend::lang.product_detail_05')</p>
                                    </div>
                                    <div class="text-center pt-6 long-pk-brd" id="profile-tab1" data-bs-toggle="tab"
                                        data-bs-target="#profile-tab-pane1" role="tab"
                                        aria-controls="profile-tab-pane1" aria-selected="false">
                                        <p class="mb-0 desc-title">@lang('frontend::lang.product_detail_06')</p>
                                    </div>
                                </div>
                                <div class="tab-content tab-contcont" id="myTabContent1">
                                    <div class="tab-pane fade show active" id="home-tab-pane1" role="tabpanel"
                                        aria-labelledby="home-tab1" tabindex="0">
                                        <div class="text-editor">
                                            {{-- {!! mwz_getTextString($product2["detail_$lang"] ?? '') !!} --}}
                                            <div class="row justify-content-around ps-4">
                                                @if (!empty($product2['code']))
                                                    <p>
                                                    <div class="col-4 col-lg-4">Model No.</div>
                                                    <div class="col-4 col-lg-4">{{ $product2['code'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($sku_detail2['pearl']))
                                                    <p>
                                                    <div class="col-4 col-lg-4">
                                                        {{ !empty($data['set_certi_w']['metal']) ? $data['set_certi_w']['metal'] : __('frontend::lang.detial_ring_00') }}
                                                    </div>
                                                    <div class="col-4 col-lg-4" id="get_pearl2">
                                                        {{ $sku_detail2['pearl'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($result_item2['diamond'][0]['name']))
                                                    <p>
                                                    <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_01')</div>
                                                    <div class="col-4 col-lg-4">
                                                        {{ $result_item2['diamond'][0]['name'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($data['set_certi_w']['certificate']))
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_02')</div>
                                                    <div class="col-4 col-lg-4">
                                                        {{ $data['set_certi_w']['certificate'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($sku_detail2['uncut']))
                                                    {{-- ทรง --}}
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_03')</div>
                                                    <div class="col-4 col-lg-4" id="get_uncut2">
                                                        {{ $sku_detail2['uncut'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($sku_detail2['shape']))
                                                    {{-- สี --}}
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_04')</div>
                                                    <div class="col-4 col-lg-4" id="get_shap2">
                                                        {{ $sku_detail2['shape'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($sku_detail2['cleanliness']))
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_05')</div>
                                                    <div class="col-4 col-lg-4" id="get_cleanliness2">
                                                        {{ $sku_detail2['cleanliness'] }}</div>
                                                    </p>
                                                @endif
                                                {{-- @if (!empty($sku_detail2['uncut']))
                                                        <p>
                                                        <div class="col-4 col-lg-4 ps-5">@lang('frontend::lang.detial_ring_06')</div>
                                                        <div class="col-4 col-lg-4" id="get_uncut2">{{ $sku_detail2['uncut'] }}</div>
                                                        </p>
                                                    @endif --}}
                                                @if (!empty($item_select2->weight))
                                                    <p>
                                                    <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_07')</div>
                                                    <div class="col-4 col-lg-4" id="get_weight2">
                                                        {{ $item_select2->weight }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($result_item2['body_type']))
                                                    <p>
                                                    <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_08')</div>
                                                    <div class="col-4 col-lg-4" id="get_housing2_2">
                                                        {{ $result_item2['body_type'] }}</div>
                                                    </p>
                                                @endif
                                                @if (!empty($item_select2->width))
                                                    <p>
                                                    <div class="col-4 col-lg-4">@lang('frontend::lang.detial_ring_09')</div>
                                                    <div class="col-4 col-lg-4" id="get_width2">
                                                        {{ $item_select2->width }}</div>
                                                    </p>
                                                @endif
                                                <div id="get_another">
                                                    {!! $sku_detail2['another'] ?? '' !!}
                                                </div>
                                            </div>
                                        </div>
                                        {{-- <div class="readmore-detail more-detail" id="more_tab_1">@lang('frontend::lang.product_detail_07')
                                            </div>
                                            <div class="showless-detail more-detail" id="close_tab_1">@lang('frontend::lang.product_detail_08')
                                            </div> --}}
                                    </div>
                                    <div class="tab-pane fade expanded" id="profile-tab-pane1" role="tabpanel"
                                        aria-labelledby="profile-tab1" tabindex="0">
                                        <div class="text-editor">
                                            {!! $sku_detail2['description'] ?? '' !!}
                                        </div>
                                        {{-- <div class="readmore-detail more-detail" id="more_tab_2">@lang('frontend::lang.product_detail_07')
                                            </div>
                                            <div class="showless-detail more-detail" id="close_tab_2">@lang('frontend::lang.product_detail_08')
                                            </div> --}}
                                    </div>
                                </div>
                            </div>
                            <div class="text-editor">
                                {!! !empty($data['text']['detail_1']) ? $data['text']['detail_1'] : '' !!}
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <div class="col-12 pt-6">
            <hr />
            <div class="flex items-center justify-center flex-col pt-2">
                <h2 class="title-text --spacing">@lang('frontend::lang.product_detail_11')</h2>
            </div>
            <section class="splide home-product-slide">
                <div class="splide__track">
                    <ul class="splide__list">
                        @if (!empty($product_other[0]->id))
                            @foreach ($product_other as $prod)
                                @php
                                    $price = calculator_price($prod->item_price);
                                @endphp
                                <li class="splide__slide">
                                    <div class="tips-card meta-to-product">
                                        <div class="tips-product relative"
                                            >
                                            <div class="tips-img">
                                                <img src="{{ convert_image(json_decode($prod->items_only[0]->images ?? null)[0]->image ?? '', 'product') }}"
                                                    alt="" />
                                            </div>
                                            @if (!empty($prod->status_new))
                                                @if (!empty($prod->labels))
                                                    <p class="tips-tag">
                                                        @foreach (json_decode($prod->labels) as $item)
                                                            {{ $item->title }}
                                                        @endforeach
                                                    </p>
                                                @endif
                                            @endif
                                            <div class="wishlist-container">
                                                @if (Auth::guard('member')->check())
                                                    <div class="the-heart {{ check_wishlist($prod->id) }}"
                                                        onclick="change_wishlist(this,{{ $prod->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>
                                        <div class="tips-detail">
                                            <div class="tips-detail-title">
                                                <span>{{ $prod["name_$lang"] }}</span><br />
                                            </div>
                                            <div class="tips-detail-extra">
                                                @if (!empty($price['discount_type']))
                                                    <p class="dis-dash">
                                                        {{ number_format($price['old_price'] ?? 0, 2) }}</p>
                                                    <p class="the-price-card"><span class="prc">THB
                                                            {{ number_format($price['total_price'] ?? 0, 2) }}
                                                        </span><span
                                                            class="red">({{ $price['discount_percent'] }}@lang('frontend::lang.product_01'))</span>
                                                    </p>
                                                @else
                                                    <p class="dis-dash"></p>
                                                    <p class="the-price-card"><span class="prc">THB
                                                            {{ number_format($price['total_price'] ?? 0, 2) }}
                                                        </span></p>
                                                @endif
                                            </div>
                                        </div>
                                        <a href="{{ mwz_route('frontend.wedding-selector', [create_slug($prod)]) }}"></a>
                                    </div>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </section>
        </div>
        <input type="hidden" value="1" id="wedding_women" name="wedding_women">
        <input type="hidden" value="1" id="wedding_men" name="wedding_men">
        <input type="hidden" value="{{ $product->id ?? 0 }}" id="product_id" name="product_id">
        <input type="hidden" value="{{ $product2->id ?? 0 }}" id="product_id2" name="product_id2">
        </form>
        </div>
        <div class="modal fade" id="outStockNotiModal" tabindex="-1" role="dialog"
            aria-labelledby="OutStockNotiModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="py-2">
                            <div class="px-2 pb-2 pb-lg-4 px-lg-5 pt-lg-5 text-center">
                                <p>@lang('frontend::lang.jewelry_01')</p>
                                <p>@lang('frontend::lang.jewelry_02')</p>
                                <h5><a
                                        href="tel:{{ $pageInit['contact_page']->phone_head_office ?? '' }}">{{ $pageInit['contact_page']->phone_head_office ?? '' }}</a>
                                </h5>
                            </div>
                            <div class="widsod200 mb-lg-5">
                                <button class="butn-submit add2bag-btn py-2" type="button"
                                    data-bs-dismiss="modal">@lang('frontend::lang.product_detail_16')</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    {{-- <input type="hidden" id="color_json" value="{{ $item_select->color ?? '' }}">
    <input type="hidden" id="diamond_json" value="{{ $item_select->diamond ?? '' }}">
    <input type="hidden" id="color2_json" value="{{ $item_select2->color ?? '' }}">
    <input type="hidden" id="diamond2_json" value="{{ $item_select2->diamond ?? '' }}"> --}}

    <input type="hidden" id="color_json" value="{{ $item_select->color ?? '' }}">
    <input type="hidden" id="diamond_json" value="{{ $item_select->diamond ?? '' }}">
    <input type="hidden" id="diamond_size" value="{{ $item_select->size ?? '' }}">
    <input type="hidden" id="color2_json" value="{{ $item_select2->color ?? '' }}">
    <input type="hidden" id="diamond2_json" value="{{ $item_select2->diamond ?? '' }}">
    <input type="hidden" id="diamond2_size" value="{{ $item_select2->size ?? '' }}">
    <input type="hidden" id="spacial_discount" value="{{ $spacial_discount ?? 0 }}">

    <input type="hidden" id="total_price1" value="{{ $price1['total_price'] ?? 0 }}">
    <input type="hidden" id="old_price1" value="{{ $price1['old_price'] ?? 0 }}">
    <input type="hidden" id="discount_percent1" value="{{ $price1['discount_percent'] ?? 0 }}">

    <input type="hidden" id="total_price2" value="{{ $price2['total_price'] ?? 0 }}">
    <input type="hidden" id="old_price2" value="{{ $price2['old_price'] ?? 0 }}">
    <input type="hidden" id="discount_percent2" value="{{ $price2['discount_percent'] ?? 0 }}">
@endsection

@section('script')

    <script>
        $(document).ready(function() {
            checkHeight('#home-tab-pane', 210, 'more_1_tab_1', 'close_1_tab_1')
            checkHeight('#profile-tab-pane', 210, 'more_1_tab_2', 'close_1_tab_2')

            checkHeight('#home-tab-pane1', 210, 'more_tab_1', 'close_tab_1')
            checkHeight('#profile-tab-pane1', 210, 'more_tab_2', 'close_tab_2')


            if ($('[name="weight"]:checked').length > 0) $('[name="weight"]:checked').trigger("onchange");
            else if ($('[name="color"]:checked').length > 0) $('[name="color"]:checked').trigger("onchange");

            if ($('[name="weight2"]:checked').length > 0) $('[name="weight2"]:checked').trigger("onchange");
            else if ($('[name="color2"]:checked').length > 0) $('[name="color2"]:checked').trigger("onchange");
        })
        // Change color label on click
        $('.color-blk input[name="size"]').change(function() {
            $('#show_size').html($(this).next().html())
        })
        $('.color-blk input[name="size2"]').change(function() {
            $('#show_size2').html($(this).next().html())
        })
        $('#butn-blank-1').click(function() {
            $('#toggle-size-1').toggleClass('hidden')
        })
        $('#butn-blank-2').click(function() {
            $('#toggle-size-2').toggleClass('hidden')
        })

        function checkHeight(target, limit, tab1, tab2) {
            let height = $(target).height();
            if (height >= limit) {
                $('#' + tab1).removeClass('hidden')
                $('#' + tab2).removeClass('hidden')

                $('#' + tab1).addClass('readmore-detail')
                $('#' + tab2).addClass('showless-detail')
            } else {
                $('#' + tab1).addClass('hidden')
                $('#' + tab2).addClass('hidden')

                $('#' + tab1).removeClass('readmore-detail')
                $('#' + tab2).removeClass('showless-detail')
            }
        }
        addtocart = function() {
            btn_action(false, $_LANG.to_cart, '#btn1submit')
            btn_action(false, $_LANG.to_cart, '#btn2submit')
            let frm_data = new FormData($('#frm_addtocart')[0]);
            let url_webpage = $('#url_webpage').val();

            $.ajax({
                url: url_webpage + locale_lang() + "order/addtocart",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function(xhr) {},
                success: function(resp) {
                    if (resp.success) {
                        $('#shoppingbag-1').html(resp.item_count)
                        $('#shoppingbag-2').html(resp.item_count)
                        cart_right(resp.order_id, $_LANG.to_cart);
                    } else {
                        if (resp.code == 999) {
                            if (resp.id == 1) $('#show_size').html(resp.msg)
                            else $(`#show_size${resp.id}`).html(resp.msg)
                        } else {
                            if (resp.id == 1) $('#show_size').html(resp.msg)
                            else $(`#show_size${resp.id}`).html(resp.msg)
                        }
                        btn_action(true, $_LANG.to_cart, `#btn1submit`)
                        btn_action(true, $_LANG.to_cart, `#btn2submit`)
                    }
                },
            });
        }

        $('#btn_cancel').on('click', function() {
            if ($('#wedding_women').val() == 2) {
                $('#wedding_women').val(1)
                $('#p-image').css('display', 'block')
                $('#p-detail').css('display', 'block')
                $(this).html("{{ __('frontend.cancel_delete') }}")
                $('#tag-btn-submit').css('display', 'block')
            } else {
                if ($('#wedding_men').val() == 2) {
                    return false;
                }
                $('#wedding_women').val(2)
                $('#p-image').css('display', 'none')
                $('#p-detail').css('display', 'none')
                $(this).html("{{ __('frontend.add') }}")
            }
        })

        $('#btn_cancel2').on('click', function() {
            if ($('#wedding_men').val() == 2) {
                $('#wedding_men').val(1)
                $('#p-image2').css('display', 'block')
                $('#p-detail2').css('display', 'block')
                $(this).html("{{ __('frontend.cancel_delete') }}")
                $('#tag-btn-submit').css('display', 'block')
                $('#btn1submit').css('display', 'none')
            } else {
                if ($('#wedding_women').val() == 2) {
                    return false;
                }
                $('#wedding_men').val(2)
                $('#p-image2').css('display', 'none')
                $('#p-detail2').css('display', 'none')
                $(this).html("{{ __('frontend.add') }}")
                $('#btn1submit').css('display', 'block')
            }
        })
    </script>
    <script type="text/javascript" src="{{ asset('assets/custom/js/detail-wedding.js') }}"></script>
@endsection