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

@section('style')

@endsection

@section('content')

    <main>

        {{-- Section : Banner --}}
        @if (!empty($pageInit['banner_page']) && $pageInit['banner_page']->status == 1)
            <div class="bg-1st banner-section-spacing mobile-banner" style="background-image: url({{-- IMG --}})">

            </div>
            <div class="bg-1st banner-section-spacing"
                style="background-image: url({{ convert_image($pageInit['banner_page']->image_1 ?? '', '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 activated current">@lang('frontend.frnd_74')
                            <a href="javascript:void(0)"></a>
                        </div>
                        <div class="nav-state-bar  ">@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-md-6 col-lg-6">
                            <div class="thumb-gallery-wrapper">
                                <div id="image_show">
                                    <div
                                        class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark mb-3">
                                        @if (!empty($product['image_couple']))
                                            <div class="asp-1b1">
                                                <img src="{{ convert_image($product['image_couple'], 'product') }}"
                                                    alt="" />
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div id="image_loop">
                                    <div class="thumb-gallery-thumbs owl-carousel owl-theme manual ">
                                        @if (!empty($product['image_couple']))
                                            <div class="cur-pointer">
                                                <img src="{{ convert_image($product['image_couple'], 'product') }}"
                                                    alt="" />
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-5">
                            <div class="summary entry-summary position-relative">
                                <div class="text-3xl font-medium" id="name_ring">
                                    {{ $product['name_couple_' . $pageInit['lang']] ?? '' }}</div>
                                {{-- @if (!empty($product->certification->id))
                                    <div class="text-xl font-light">@lang('frontend.frnd_40'):
                                        {{ $product->certification['name_' . $pageInit['lang']] ?? '' }}</div>
                                @endif --}}
                                @if (!empty($couple_detail['content_' . $pageInit['lang']]))
                                    <div class="text-lg font-light pt-6">
                                        {{ $couple_detail['content_' . $pageInit['lang']] }}</div>
                                @endif
                                <div class="py-6 pdt">
                                    <div id="price">
                                        @if ($price['discount_type'])
                                            <p class="dis-dash" id="old_price">{{ number_format($price['old_price'], 2) }}
                                            </p>
                                            <p class="the-price-card" id="total_price"><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="the-price-card" id="total_price"><span class="prc">THB
                                                    {{ number_format($price['total_price'], 2) }} </span></p>
                                            <hr class="my-3" />
                                        @endif
                                    </div>
                                    <div class="space-y-3">
                                        @if (!empty($product->id) && !empty($product2))
                                            <div class="radck-wicn">
                                                <input class="hidden" id="CoupleType1" type="radio" name="couple-type"
                                                    value="{{ mwz_route('frontend.couple.detail', [create_slug($product), create_slug($product2)]) }}"
                                                    checked />
                                                <label for="CoupleType1" onclick="window.location.reload()"><span
                                                        class="rdo-stl"></span>
                                                    <div>
                                                        <div class="text-lg">@lang('frontend.frnd_74')</div>
                                                    </div>
                                                </label>
                                            </div>
                                        @endif
                                        @if (!empty($product->id))
                                            <div class="radck-wicn">
                                                <input class="hidden" id="CoupleType2" type="radio" name="couple-type"
                                                    value="{{ mwz_route('frontend.couple.detail.female', [create_slug($product)]) }}" />
                                                <label for="CoupleType2"
                                                    onclick="setSelectCouplePrice({{ $product->id }})"><span
                                                        class="rdo-stl"></span>
                                                    <div>
                                                        <div class="text-lg">@lang('frontend.frnd_75')</div>
                                                    </div>
                                                </label>
                                            </div>
                                        @endif
                                        @if (!empty($product2->id))
                                            <div class="radck-wicn">
                                                <input class="hidden" id="CoupleType3" type="radio" name="couple-type"
                                                    value="{{ mwz_route('frontend.couple.detail.male', [create_slug($product2)]) }}" />
                                                <label for="CoupleType3"
                                                    onclick="setSelectCouplePrice({{ $product2->id }})"><span
                                                        class="rdo-stl"></span>
                                                    <div>
                                                        <div class="text-lg">@lang('frontend.frnd_76')</div>
                                                    </div>
                                                </label>
                                            </div>
                                        @endif
                                    </div>
                                    <a class="mt-3 butn-submit add2bag-btn couple-flow flex justify-center"
                                        href="javascript:pageDetail()">@lang('frontend.product_details')</a>
                                </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)