@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;
        }

        .title-video {
            max-width: 101px !important;
            max-height: 57px !important;
        }
    </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">
                <div class="col-lg-12">
                    <div class="row justify-center">
                        <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_$lang"] ?? '' }}</div>
                                @if (!empty($data['set_certi']['certificate']))
                                    <div class="text-xl font-light">@lang('frontend.frnd_40'):
                                        {{ $data['set_certi']['certificate'] ?? '' }}
                                    </div>
                                @endif
                                <div class="text-xl font-light">{{-- @lang('frontend.categories'): --}}
                                    {{ $data['category_menu']['cat_name'] ?? '' }}</div>
                                @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
                                <form class="py-6 pdt" id="frm_addtocart" onsubmit="addtocart(); return false;">
                                    @csrf
                                    <div class="html-price">
                                        @if ($price['discount_type'])
                                            <p class="dis-dash">
                                                {{ !empty($price['old_price']) ? number_format($price['old_price'], 2) : '' }}
                                            </p>
                                            <p class="the-price-card"><span class="prc">THB
                                                    {{ !empty($price['total_price']) ? number_format($price['total_price'], 2) : '' }}
                                                </span><span class="red">(@lang('frontend.save')
                                                    {{ !empty($price['discount_percent']) ? $price['discount_percent'] : '' }}%)</span>
                                            </p>
                                            <hr class="my-3" />
                                        @else
                                            <p class="dis-dash"></p>
                                            <p class="the-price-card"><span class="prc">THB
                                                    {{ !empty($price['total_price']) ? 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') {{-- -&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="{{ mwz_route('frontend.detail.body') }}"> </a></div>
                                        </div>
                                        <div class="color-chooser my-3">
                                                                                        @foreach ($result_item['color'] as $k => $clr)
                                                <div class="color-blk">
                                                    <input id="color-{{ $k }}" type="radio" name="color"
                                                        value="{{ $clr['color'] ?? '' }}" {{ $cs == $k ? 'checked' : '' }}
                                                        onchange="change_color(this.value,'{{ $product->id }}')" />
                                                    <label style="background-color: {{ $clr['code'] ?? '#ffffff' }}"
                                                        for="color-{{ $k }}">
                                                        {{ $clr['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 $k => $dmd)
                                                <div class="color-blk">
                                                    <input onchange="change_diamond(this.value,'{{ $product->id }}')"
                                                        id="weight-ST{{ $dmd['uid'] }}" type="radio" name="weight"
                                                        value="{{ $dmd['diamond'] ?? '' }}"
                                                        {{ $ds == $k ? 'checked' : '' }} />
                                                    <label
                                                        for="weight-ST{{ $dmd['uid'] }}">{{ $dmd['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" 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)" />
                                                            @if (chk_stock($size))
                                                                <label data-bs-toggle="modal"
                                                                    data-bs-target="#outStockNotiModal"
                                                                    for="size-ST{{ $size['uid'] ?? '' }}">{{ $size['name'] ?? '' }}</label>
                                                            @else
                                                                <label
                                                                    for="size-ST{{ $size['uid'] ?? '' }}">{{ $size['name'] ?? '' }}</label>
                                                            @endif
                                                        </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

                                    @if (Auth::guard('member')->check())
                                        <button class="butn-submit add2bag-btn" id="btn-confirm"
                                            type="submit">@lang('frontend::lang.product_detail_04')</button>
                                    @else
                                        <button class="butn-submit add2bag-btn" type="button" data-bs-toggle="modal"
                                            data-bs-target="#loginNotiModal">@lang('frontend::lang.product_detail_04')</button>
                                    @endif
                                    <input type="hidden" value="{{ $product->id ?? 0 }}" name="product_id">
                                </form>
                            </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>Add to Wish List</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>Add to Wish List</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'] : '' }}">
                            {{-- @dump($sku_detail) --}}
                            <div id="set_content">
                                <div class="nav pt-6 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']['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" 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-pane" role="tabpanel"
                                        aria-labelledby="profile-tab" tabindex="0">
                                        <div class="text-editor" id="product_form">
                                            {!! $sku_detail['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>
                            <hr class="mb-6">
                            <div class="text-editor">
                                {!! !empty($data['text']['detail_1']) ? $data['text']['detail_1'] : '' !!}
                            </div>
                        </div>
                    </div>
                </div>
                @if (!empty($product_other) && count($product_other) > 0)
                    <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">
                                    @foreach ($product_other as $prod)
                                        @php
                                            $price = calculator_price($prod->item_price);
                                            $get_image_item = setImage($prod->id);
                                        @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) && !empty($prod->labels))
                                                        <p class="tips-tag">
                                                            @foreach (json_decode($prod->labels) as $item)
                                                                {{ ($item->title ?? '') . ' ' }}
                                                            @endforeach
                                                        </p>
                                                    @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><span>{!! backProductName($product, $get_image_item['foritems'] ?? '', $pageInit['lang']) !!}</span>
                                                    </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.jewelry.detail', [create_slug($prod)]) }}"></a>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </section>
                    </div>
                @endif
            </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::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="diamond_size" value="{{ $item_select->size ?? '' }}">
@endsection

@section('script')

    <script>
        // favorite slide
        $(document).ready(function() {

            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, $_LANG.to_cart)
            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) {
                            $('#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