@extends('index')

@section('content')
    <section id="product_section">
        <div class="container mb-5">
            <ul class="d-flex my-5 color_808080">
                <li>購物專區</li>
                <li class="px-4">|</li>
                <li>產品總覽</li>
            </ul>
            <h1 class="title_2 color_77832A mb-5">產品總覽</h1>
            <div class="ProductMenuBox">
                <ul>
                    @foreach($product_categories as $category)
                        <li><a class="{{$category->cate_title_en == $now_category ? 'active' : ''}}" href="/series/{{$category->cate_title_en}}">{{$category->cate_title}}</a></li>
                    @endforeach
                </ul>
            </div>
            <div>
                <div id="ProductList" class="row">
                    @include('productItem', ['products' => $products])
                </div>
                <div id="loadStatus" class="text-center my-4" style="display: none;">
                    <span id="loadingText">載入中...</span>
                </div>
            </div>
        </div>
    </section>
    <div id="compareTeaCard">
        @include('compareTeaCard', ['compare_list', $compare_list])
    </div>
@endsection

@section('javascript')
    <script>
        let nextPage = 2;
        let loading = false;
        let hasMore = true;

        $(window).on('scroll', function () {
            if (!loading && hasMore && $(window).scrollTop() + $(window).height() >= $(document).height() - 10) {
                loading = true;
                $('#loadStatus').show();
                $('#loadingText').text('載入中...');

                setTimeout(function(){
                    $.get(`/series/{{ $now_category }}?page=` + nextPage, function (res) {
                        $('#ProductList').append(res.html);
                        hasMore = res.hasMore;

                        if (!hasMore) {
                            $('#loadingText').text('商品已載入完畢');
                        } else {
                            $('#loadStatus').hide(); // 若你希望只顯示文字可不 hide
                        }

                        nextPage++;
                        loading = false;
                    });
                }, 400);
            }
        });

        /*加入購物車*/
        $('.btn_add_to_cart').on('click', function () {
            let _this = $(this),
                v_data = {
                    product_id: _this.data('product_id'),
                    product_qty: 1,
                    _method: 'POST',
                    _token: '{!! csrf_token() !!}'
                };

            $.ajax({
                type: 'POST',
                url: '{{url('cart_process/add_item_to_cart')}}',
                data: $.param(v_data),
                datatype: 'json',
                success: function(msg) {
                    if (msg.status) {
                        let qty = parseInt($('#header_itemnum').text()) + 1;
                        $('#header_itemnum').text(qty);

                        Swal.fire({
                            icon: 'success',
                            html: `已加入購物車！`,
                            confirmButtonText: '確定',
                            allowOutsideClick: false
                        });
                    } else {
                        Swal.fire({
                            type: 'warning',
                            title: '提示',
                            text: msg.text,
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        type: 'error',
                        title: '錯誤',
                        text: '加入購物車失敗，請重整再試',
                    });
                }
            });
        });

        /*加入比較*/
        $('.CompareBtnPc, .CompareBtnMb').on('click', function () {
            let device = 1;
            if ($(this).hasClass('CompareBtnMb')) {
                device = 2;
            }

            let _this = $(this),
                v_data = {
                    product_id: _this.data('product_id'),
                    device: device,
                    _method: 'POST',
                    _token: '{!! csrf_token() !!}'
                };
            $.ajax({
                type: 'POST',
                url: '{{url("add_item_to_compare")}}',
                data: $.param(v_data),
                datatype: 'json',
                success: function(msg){
                    if(!msg.status){
                        Swal.fire({
                            type:'warning',
                            title: '提示',
                            text:msg.text
                        });
                    } else {
                        $('#compareTeaCard').load("/compare");
                    }
                },
                error:function(){
                    swal({
                        type: 'error',
                        title: '錯誤',
                        text: '加入茶品比較失敗，請重整再試',
                    });
                }
            });
        });

        /*移除比較*/
        $('#compareTeaCard').on('click', '[id*=remove_compare]', function () {
            let _this = $(this),
                v_data = {
                    product_id: _this.parents('div').data('product_id'),
                    _method: 'POST',
                    _token: '{!! csrf_token() !!}'
                };
            $.ajax({
                type: 'POST',
                url: '{{url("remove_item_in_compare")}}',
                data: $.param(v_data),
                datatype: 'json',
                success: function(msg){
                    if(!msg.status){
                        Swal.fire({
                            type:'warning',
                            title: '提示',
                            text:msg.text
                        });
                    } else {
                        $('#compareTeaCard').load("/compare");
                    }
                },
                error:function(){
                    swal({
                        type: 'error',
                        title: '錯誤',
                        text: '移除茶品比較失敗，請重整再試',
                    });
                }
            });
        });
    </script>
@endsection