@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 pb-3 xl:pt-6">
            <div class="row">
                <div class="col">
                    <div class="mb-8">
                        @includeIf('frontend::filter.nav-filter')
                    </div>
                    <button id="FiterMobileTrigger">@lang('frontend::lang.lang_title_111') ></button>
                    <div class="row gifts-item">

                    </div>
                    <div class="row">
                        <div class="col-12 lg:pt-6">
                            <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>
        <div class="modal coupon-modal fade" id="couponModal" tabindex="-1" role="dialog"
            aria-labelledby="couponModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{ Module::asset('frontend:img/coupon.png') }}" alt="" />
                        <div class="closed-modal" data-bs-dismiss="modal">X</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        var page = 1
        var totalPage = 1

        $('.the-heart').click(function() {
            $(this).toggleClass('active')
        })

        $(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();
            $.ajax({
                url: url_webpage + locale_lang() + "product-discover",
                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) {
                        $('.gifts-item').html('')
                    }
                    $('.gifts-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-gifts', 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();
            $.ajax({
                url: url_webpage + locale_lang() + "gifts-old",
                type: "GET",
                data: {
                    page: page,
                    catetory_id: '{{ $cat_id }}',
                    filter: genAllData(['price', 'stone', 'certificate', 'style', 'housing', 'gem'])
                },
                success: function(resp) {
                    $('.gifts-item').prepend(resp)
                    let product_id = window.localStorage.getItem('focus-gifts')
                    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-gifts.js') }}"></script>
@endsection