@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 xl:pt-6">
            <div class="row">
                <div class="col">
                    <div class="mb-8">
                        @includeIf('frontend::filter.nav-filter')
                    </div>
                    <div class="row justify-center">
                        <div class="pb-6 xl:pb-12 col-9">
                            <div class="nav-state-wrapper">
                                <div class="nav-state-bar preserv activated current">@lang('frontend.frnd_74')
                                    <a href="{{ url('couple') }}"></a>
                                </div>
                                <div class="nav-state-bar  ">@lang('frontend.frnd_71')
                                    <a href="{{ url('couple-selector') }}"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button id="FiterMobileTrigger">@lang('frontend.frnd_38') ></button>
                    <div class="row couple-item">

                    </div>
                    <div class="row">
                        <div class="col-12 lg:pt-6">

                            {{-- <div class="tag-loading" style="display: block">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="171px" height="171px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
                                    <g transform="rotate(0 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(30 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(60 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(90 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(120 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(150 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(180 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(210 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(240 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(270 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(300 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                    <g transform="rotate(330 50 50)">
                                        <rect x="48.5" y="24" rx="0" ry="0" width="3" height="12" fill="#fe718d">
                                            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
                                        </rect>
                                    </g>
                                </svg>
                            </div> --}}

                            <div class="text-center btn-viewmore" style="display: none">
                                <a class="text-decoration-none inline-block" onclick="get_product()"
                                    href="javascript:void(0)">
                                    <h4>@lang('frontend.frnd_37')</h4>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        var page = 1
        var totalPage = 1

        $(window).on('load', function() {
            //$('#couponModal').modal('show');
            tag_filter();
            setChecked(['price', 'stone', 'certificate', 'style', 'housing', 'gem'], '{{ $cat_id }}');
            setFilterName(['price', 'stone', 'certificate', 'style', 'housing', 'gem'], '{{ $cat_id }}', 1);
        });

        genAllData = function(arr) {
            let data = [];
            arr.forEach((text) => {
                let str_filter = window.localStorage.getItem(text + '{{ $cat_id }}')
                if (str_filter != null) {
                    let arrfilter = $.parseJSON(str_filter)
                    data[text] = arrfilter;
                } else {
                    data[text] = '';
                }
            })
            const jsonString = JSON.stringify(Object.assign({}, data))
            return jsonString;
        }

        get_product = async function(chk = false, clear = false) {
            $('.btn-viewmore').css('display', 'none')
            // $('.tag-loading').css('display', 'block')
            let url_webpage = $('#url_webpage').val();

            await $.ajax({
                url: url_webpage + locale_lang() + "product-couple",
                type: "GET",
                data: {
                    page: page,
                    catetory_id: '{{ $cat_id }}',
                    filter: genAllData(['price', 'stone', 'certificate', 'style', 'housing', 'gem'])
                },
                success: function(resp) {
                    const array = resp.split('|~|')
                    // $('.tag-loading').css('display', 'none')
                    if (clear) {
                        $('.couple-item').html('')
                    }
                    $('.couple-item').append((array[0] ? array[0] :
                        '<h4 style="text-align: center;">{{ __('frontend.frnd_36') }}</h4>'))
                    totalPage = parseInt((array[1] ? array[1] : 1))
                    window.localStorage.setItem('page-couple', page)
                    if (performance.navigation.type == 2) {
                        if (chk) {
                            get_old_product();
                        }
                    }
                    page = parseInt(page) + 1;
                    if (page > totalPage) {
                        $('.btn-viewmore').css('display', 'none')
                    } else {
                        $('.btn-viewmore').css('display', 'block')
                    }
                },
            });
        }

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

            await $.ajax({
                url: url_webpage + locale_lang() + "couple-old",
                type: "GET",
                data: {
                    page: page,
                    catetory_id: '{{ $cat_id }}',
                    filter: genAllData(['price', 'stone', 'certificate', 'style', 'housing', 'gem'])
                },
                success: function(resp) {
                    $('.couple-item').prepend(resp)
                    let product_id = window.localStorage.getItem('focus-couple')
                    if (product_id) {
                        $('html, body').animate({
                            scrollTop: $("#page-focus" + product_id).offset().top
                        }, 0);
                    }
                },
            });
        }
    </script>
    <script type="text/javascript" src="{{ asset('assets/custom/js/filter-couple.js') }}"></script>
@endsection