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

@section('style')

@endsection

@section('content')

    <main>

        {{-- Section : Banner --}}
        @if (!empty($categories['image_banner_mobile']))
            <div class="bg-1st banner-section-spacing mobile-banner"
                style="background-image: url({{ convert_image($categories['image_banner_mobile'] ?? '', 'wheretobuy') }})">

            </div>
        @endif
        @if (!empty($categories['image_banner']))
            <div class="bg-1st banner-section-spacing"
                style="background-image: url({{ convert_image($categories['image_banner'] ?? '', 'wheretobuy') }})">

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

        <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 activated current">@lang('frontend::lang.wedding_select_02')
                            <a href="javascript:void(0)"></a>
                        </div>
                        <div class="nav-state-bar">@lang('frontend::lang.wedding_select_03')
                            <a href="javascript:void(0)"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-5 col-xl-4 pb-4 relative">
                    <hr />
                    <div class="text-xl font-medium my-4">@lang('frontend::lang.wedding_select_04') </div>
                    <hr />
                    <div class="wedding-ring-section pt-6" id="wedRingSect">
                        <div class="female-ring-section">
                            <div class="tips-card meta-to-product">
                                <div class="tips-product relative"
                                    >
                                    <div class="tips-img">
                                        <img src="{{ convert_image(json_decode($product->items_only[0]->images)[0]->image ?? '', 'tipsandtrend') }}"
                                            alt="" />
                                    </div>
                                </div>
                                <div class="tips-detail">
                                    <div class="tips-detail-title">
                                        <strong class="text-text">
                                            {{ $product['name_' . $pageInit['lang']] ?? '' }}</strong>
                                        {!! backProductName($product, setImage($product->id)['foritems'] ?? null, $pageInit['lang']) ?? null !!}
                                    </div>
                                    <div class="tips-detail-extra">
                                                                                <p class="the-price-card"><span class="prc">THB
                                                0.00 </span></p>
                                                                            </div>
                                </div>
                            </div>
                        </div>

                        <div class="male-ring-section" id="maleRingSect">
                            <div class="tips-card meta-to-product male-selector unactive">
                                <div class="tips-product relative">
                                    <div class="tips-img">
                                        <img src="{{ Module::asset('frontend:img/product/show.png') }}" alt="" />
                                    </div>
                                </div>
                                <div class="tips-detail">
                                    <div class="tips-detail-title"> <strong class="text-text">แหวนเพชรเดี่ยว
                                            Amor</strong><br /><strong class="text-text"> ใบเซอร์GIA / 18kw ทองขาว</strong>
                                    </div>
                                    <div class="tips-detail-extra">
                                        <p class="dis-dash">98,000.00</p>
                                        <p class="the-price-card"><span class="prc">THB 53,900.00 </span><span
                                                class="red">(45% OFF)</span></p>
                                    </div>
                                </div><a class="items-center justify-center" href="#productList">@lang('frontend::lang.wedding_select_02') </a>
                            </div>
                        </div>

                        <div class="mt-6 sem tn:col-span-2 md:col-span-1 hidden" id="btn-detail">
                            <a class="block text-center butn-submit add2bag-btn mx-lg3"
                                href="javascript:webding_detail()">@lang('frontend.frnd_137')</a>
                        </div>

                    </div>
                </div>
                <div class="col-md-7 col-xl-8 pb-4">
                    <hr id="productList" />
                    <div class="text-xl font-medium my-4">@lang('frontend::lang.wedding_select_02')</div>
                    <hr />
                    <div class="row pt-6" id="product_html">

                    </div>

                </div>
                <div class="col-12 lg:pt-6">
                    <div class="text-center btn-viewmore" style="display: none">
                        <a class="text-decoration-none inline-block" href="javascript:get_nextproducts()">
                            <h4>@lang('frontend.frnd_37')</h4>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        var page = 1
        var totalPage = 1
        var slug1 = '{{ create_slug($product) }}';
        var slug2 = '';

        $('.set-male-item').click(function() {
            $('.male-selector').removeClass('unactive')
            $('.sem').removeClass('hidden')
        })

        $(window).on('load', function() {
            get_products();
            window.localStorage.setItem('oldurl-wedding-selector', decodeURI('{{ request()->path() }}'))
        })

        get_products = function() {
            let url_webpage = $('#url_webpage').val();

            $.ajax({
                url: url_webpage + locale_lang() + "wedding/selector/get-products",
                type: "GET",
                data: {
                    cat: "{{ $pageInit['cat'] }}",
                    product_id: '{{ $product->id ?? 0 }}'
                },
                success: function success(resp) {
                    const array = resp.split('|~|')
                    $('#product_html').html(array[0])
                    // $('.tag-loading').css('display', 'none')
                    totalPage = parseInt((array[1] ? array[1] : 1))
                    page = parseInt(page) + 1;
                    if (page > totalPage) {
                        $('.btn-viewmore').css('display', 'none')
                    } else {
                        $('.btn-viewmore').css('display', 'block')
                    }
                }
            });
        }

        get_nextproducts = function() {
            let url_webpage = $('#url_webpage').val();
            // $('.tag-loading').css('display', 'block')

            $.ajax({
                url: url_webpage + locale_lang() + "wedding/selector/get-nextproducts",
                type: "GET",
                data: {
                    product_id: '{{ $product->id ?? 0 }}',
                    page: page
                },
                success: function success(resp) {
                    $('#product_html').append(resp)
                    // $('.tag-loading').css('display', 'none')
                    page = parseInt(page) + 1;
                    if (page > totalPage) {
                        $('.btn-viewmore').css('display', 'none')
                    } else {
                        $('.btn-viewmore').css('display', 'block')
                    }
                }
            });
        }

        select_wedding = function(product_id) {
            let url_webpage = $('#url_webpage').val();

            $.ajax({
                url: url_webpage + locale_lang() + "wedding/selected",
                type: "GET",
                data: {
                    product_id: product_id
                },
                success: function success(resp) {
                    const array = resp.split('|~|')
                    $('.tips-card.meta-to-product.male-selector').removeClass('unactive')
                    $('.tips-card.meta-to-product.male-selector').html(array[0])
                    $('#btn-detail').removeClass('hidden')
                    $('html, body').animate({
                        scrollTop: $("#wedRingSect").offset().top
                    }, 0);
                    slug2 = array[1];
                }
            });
        }

        webding_detail = function() {
            let url_webpage = $('#url_webpage').val();
            top.window.location.href = url_webpage + locale_lang() + 'wedding-detail/' + slug1 + '/' + slug2;
        }
    </script>

@endsection