@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>
        {{-- 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.frnd_74')
                            <a href="javascript:backToLastPage('oldurl-couple')"></a>
                        </div>
                        <div class="nav-state-bar preserv activated current">@lang('frontend.frnd_71')
                            <a href="javascript:void(0)"></a>
                        </div>
                    </div>
                </div>
            </div>
            <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.frnd_132')</div>
                                    </div>
                                    <hr />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6">
                            <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">
                            <div class="summary entry-summary position-relative">
                                <div class="text-3xl font-medium">{{ $product['name_' . $pageInit['lang']] ?? '' }}</div>
                                @if (!empty($data['set_certi']['certificate']))
                                    <div class="text-xl font-light">@lang('frontend.frnd_40'):
                                        {{ $data['set_certi']['certificate'] }}</div>
                                @endif
                                @if (!empty($data['category_menu']['cat_name']))
                                    <div class="text-xl font-light">{{-- @lang('frontend.categories'): --}}
                                        {{ $data['category_menu']['cat_name'] ?? '' }}</div>
                                @endif
                                @if (!empty($result_item['body_type']))
                                    <div class="text-xl font-light">
                                        @if (!empty($result_item['show_name_color']))
                                            {{-- @lang('frontend.frnd_42'): --}}
                                            <hh id="get_housing">
                                                {{ $result_item['body_type'] ?? '' }}</hh>
                                            <g id="get_color">{{ ' ' . $result_item['show_name_color'] }}</g>
                                        @else
                                            {{-- @lang('frontend.frnd_42'): --}}
                                            <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">
                                    <form class="py-6 pdt" id="frm_addtocart" onsubmit="addtocart(); return false;">
                                        <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>
                                            <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'] ?? '' }}"
                                                            {{ $clr == $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'] ?? '' }}"
                                                            {{ $dmd == $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.frnd_124')</i><i
                                                        class="fa fa-exclamation"></i><a
                                                        href="{{ mwz_route('frontend.detail.size') }}"></a></div>
                                            </div>
                                            <button class="butn-blank" 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">
                                                {{-- 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)" />
                                                                <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.frnd_125') </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
                                        @if (Auth::guard('member')->check())
                                            <button class="butn-submit add2bag-btn" id="btn-confirm"
                                                type="submit">@lang('frontend.frnd_71')</button>
                                        @else
                                            <button class="butn-submit add2bag-btn" type="button" data-bs-toggle="modal"
                                                data-bs-target="#loginNotiModal">@lang('frontend.frnd_71')</button>
                                        @endif
                                        <input type="hidden" value="{{ $product->id ?? 0 }}" name="product_id">
                                    </form>
                                </div>
                            </div>
                            <div class="flex items-center justify-around">
                                <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.frnd_126')</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.frnd_126')</p>
                                        <a href="javascript:void(0)" data-bs-toggle="modal"
                                            data-bs-target="#loginNotiModal"></a>
                                    @endif
                                </div>
                            </div>
                            <input type="hidden" id="cat_id"
                                value="{{ !empty($data['cat_id']) ? $data['cat_id'] : '' }}">
                            <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.product_details')</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.frnd_127')</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_' . $pageInit['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']['metal']) ? $data['set_certi']['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']['certificate']))
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-4">@lang('frontend::lang.detial_ring_02')</div>
                                                    <div class="col-4 col-lg-4">{{ $data['set_certi']['certificate'] }}
                                                    </div>
                                                    </p>
                                                @endif
                                                @if (!empty($sku_detail['uncut']))
                                                    {{-- ทรง --}}
                                                    <p>
                                                    <div class="col-4 col-lg-4 ps-4">@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-4">@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-4">@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 (!empty($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">@lang('frontend.frnd_31')</div>
                                        <div class="showless-detail more-detail">@lang('frontend.frnd_128')</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">@lang('frontend.frnd_31')</div>
                                        <div class="showless-detail more-detail">@lang('frontend.frnd_128')</div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 lg:pt-6">
                <hr />
                <div class="flex items-center justify-center flex-col pt-2">
                    <h2 class="title-text --spacing">@lang('frontend.frnd_77')</h2>
                </div>
                <section class="splide home-product-slide">
                    <div class="splide__track">
                        <ul class="splide__list">
                            @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
                                            {{-- <p class="tips-tag">NEW</p> --}}
                                            <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_' . $pageInit['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.couple.selector', [create_slug($prod)]) }}"></a>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </section>
            </div>
        </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.frnd_130')</p>
                                <p>@lang('frontend.frnd_131')</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.confirm')</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 ?? '' }}">
@endsection

@section('script')

    <script>
        $(document).ready(function() {
            // favorite slide
            productItemMount('.home-product-slide')

            checkHeight('#home-tab-pane', 210, 'more_tab_1', 'close_tab_1')
            checkHeight('#profile-tab-pane', 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");
        })

        // Toggle Display of Product Size
        $('.butn-blank').click(function() {
            $('.toggle-size').toggleClass('hidden')
        })

        // Change color label on click
        $('.color-blk input[name="size"]').change(function() {
            $('.disp-tag').html($(this).next().html())
        })

        // Toggle more and less detail
        $('.more-detail').click(function() {
            $(this).parent().toggleClass('expanded')
        })

        addtocart = function() {
            btn_action(false, "{{ __('frontend.frnd_71') }}")
            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, "{{ __('frontend.frnd_71') }}");
                    } else {
                        if (resp.code == 999) $('#show_size').html(resp.msg)
                        else $('#show_size').html(resp.msg)
                        btn_action(true, $_LANG.to_cart)
                    }
                },
            });
        }
    </script>
    <script type="text/javascript" src="{{ asset('assets/custom/js/image_product_detail.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/custom/js/detail-jewelry.js') }}"></script>
@endsection