@extends('index')

@section('content')
    <section>
        <div class="container">
            <ul class="d-flex my-5 color_808080">
                <li>{{__('custom.購物專區')}}</li>
                <li class="px-4">|</li>
                <li><a href="{{ "/series/{$product_categories[0]->cate_title_en}" }}" style="color: inherit; text-decoration: none;" onmouseover="this.style.color='#007BFF';"
                       onmouseout="this.style.color='inherit';">{{__('custom.產品總覽')}}</a></li>
                <li class="px-4">|</li>
                <li><a href="/product/{{$product->product_id}}" style="color: inherit; text-decoration: none;" onmouseover="this.style.color='#007BFF';" onmouseout="this.style.color='inherit';">{{$product->product_name}}</a></li>
            </ul>

            <div class="row">
                <div class="col-lg-4">
                    <div class="ProductImg">
                        <div class="ProductImgBox">
                            <div><img class="img-fluid MainProductImg show" src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$product->product_id.'/'.str_replace
						('.', '_t.', $product->productAlbum[0]->album_photo)}}" alt=""></div>
                        </div>
                        <div class="d-flex ProductThumbnail">
                            @foreach ($product->productAlbum as $albumInfo)
                                <div><img class="img-fluid" src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$product->product_id.'/'.str_replace
									('.', '_t.', $albumInfo->album_photo)}}" alt="{{$product->product_name}}"></div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ms-lg-4">
                        <h1 class="title_3 color_77832A mt-5">{{$product->product_name}}</h1>
                        <div class="d-flex flex-column">
                            <div class="mt-4 ProductContents order-1 order-lg-0">
                                <div class="SpecificationMb d-lg-none">{{__('custom.規格')}}</div>
                                <div class="d-flex flex-column flex-lg-row align-items-lg-center">
                                    <p class="color_77832A mt-4">{{__('custom.商品編號')}}</p>
                                    <p class="fz_21 ms-lg-auto mt-3">{{$product->product_number}}</p>
                                </div>
                                <div class="d-flex flex-column flex-lg-row align-items-lg-center">
                                    <p class="color_77832A mt-4">{{__('custom.內容物')}}</p>
                                    <p class="fz_21 ms-lg-auto mt-3">{{$product->product_package_content}}</p>
                                </div>
                                <div class="d-flex flex-column flex-lg-row align-items-lg-center">
                                    <p class="color_77832A mt-4">{{__('custom.產區')}}</p>
                                    <p class="fz_21 ms-lg-auto mt-3">{{$product->product_area}}</p>
                                </div>
                                <div class="d-flex flex-column flex-lg-row align-items-lg-center">
                                    <p class="color_77832A mt-4">{{__('custom.口味')}}</p>
                                    <p class="fz_21 ms-lg-auto mt-3">{{$product->product_taste}}</p>
                                </div>
                            </div>
                            <div class="mt-4 order-0 order-lg-1">
                                <div class="d-flex flex-column flex-lg-row">
                                    <p class="ms-lg-auto MarketPrice">{{__('custom.市價')}}：{{number_format($product->product_origin_price)}}</p>
                                    <p class="ms-lg-5 SpecialPrice color_77832A">{{__('custom.優惠價')}}：NTD <span>{{number_format($product->product_sale_price)}}</span></p>
                                </div>
                                <div id="btn_cart_detail" class="d-flex flex-column flex-lg-row mt-4">
                                    <div class="TotalQuantity">
                                        <input id="equalAmount" type="text" value="1" readonly>
                                        <div class="ReduceQuantity"><img src="{{asset('images/btn_minus.svg')}}" alt=""></div>
                                        <div class="AddQuantity"><img src="{{asset('images/btn_add.svg')}}" alt=""></div>
                                    </div>
                                    <a id="btn_add_to_cart" data-product_id="{{$product->product_id}}" class="AddToCart" href="javascript:">{{__('custom.加入購物車')}}</a>
                                </div>
                            </div>
                        </div>
                        <div class="discountMb d-lg-none mt-4">{{__('custom.商品優惠')}}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-none d-lg-block">
                        <div class="ProductIntroductionBox">
                            <div class="Title">{{__('custom.商品優惠')}}</div>
                            <div class="Line"></div>
                        </div>
                    </div>
                    <table class="table table-borderless discountPc">
                        <tbody>
                        @foreach($relation_preferential as $item)
                            <tr>
                                <td class="Item1">{{$item['type']}} <span class="ms-3">/</span></td>
                                <td class="Item2">{{$item['preferential_title']}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <div class="mt-5">
                        <a href="#"><img src="{{asset('images/icons_fb.svg')}}" alt=""></a>
                        <a class="mx-3" href="#"><img src="{{asset('images/icons_line.svg')}}" alt=""></a>
                        <a href="#"><img src="{{asset('images/icons_mail.svg')}}" alt=""></a>
                    </div>
                    <div class="mb-4">
                        <div class="ProductIntroductionBox">
                            <div class="Title">{{__('custom.商品介紹')}}</div>
                            <div class="Line"></div>
                        </div>
                    </div>
                    <div class="IntroduceCenter">
                        {!! html_entity_decode(str_replace('://www.','://',$product->product_content)) !!}
                    </div>
                    <div class="mb-4">
                        <div class="ProductIntroductionBox">
                            <div class="Title">{{__('custom.優惠商品')}}</div>
                            <div class="Line"></div>
                        </div>
                    </div>
                    <div class="row mb-5">
                        @foreach($relation_preferential_products as $relation_product_id => $relation_product)
                            <div class="col-6 col-lg-4 mt-4">
                                <div class="ProductcContainerBox">
                                    <div class="ProductcContainer">
                                        <div><img src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$relation_product_id.'/'.str_replace('.', '_t.', $relation_product['photo'])}}" alt="{{$relation_product['name']}}"></div>
                                    </div>
                                    <div class="p-3 p-lg-4">
                                        <h2><a class="ProductName" href="{{ "/product/{$relation_product_id}" }}">{{$relation_product['name']}}</a></h2>
                                        <div class="d-flex align-items-center mt-2 mt-lg-3">
                                            <p class="price"><span class="color_959595">NT$</span> <span class="ms-2">{{number_format($relation_product['price'])}}</span></p>
                                            <a class="ms-auto" href="#"><img src="{{asset('images/icons_shoppin.svg')}}" alt=""></a>
                                        </div>
                                        <a class="CompareBtn" href="#"><img class="pe-2" src="{{asset('images/icons_puch.svg')}}" alt="">{{__('custom.比較')}}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(document).ready(function() {
            const equalAmount = document.getElementById('equalAmount');

            equalAmount.addEventListener('input', () => {
                let val = parseInt(equalAmount.value);
                if (isNaN(val) || val < 1) {
                    equalAmount.value = 1;
                }
            });

            // 減少數量
            $('.ReduceQuantity').click(function() {
                var $input = $(this).siblings('input');
                var val = parseInt($input.val()) || 0;
                if(val > 1){
                    $input.val(val - 1);
                }
            });

            // 加號（如果還沒加的話）
            $('.AddQuantity').click(function() {
                var $input = $(this).siblings('input');
                var val = parseInt($input.val()) || 0;
                $input.val(val + 1);
            });

            // 商品縮圖點擊切換主圖
            let isAnimating = false;
            $('.ProductThumbnail img').click(function() {
                if ($(this).hasClass('active') || isAnimating) return;
                isAnimating = true;

                var newSrc = $(this).attr('src');
                var $oldImg = $('.MainProductImg');
                var $imgBox = $('.ProductImgBox');
                var $newImg = $oldImg.clone();

                // 判斷滑動方向
                var oldIndex = $('.ProductThumbnail img.active').parent().index();
                var newIndex = $(this).parent().index();
                var direction = (newIndex > oldIndex) ? 'right' : 'left';

                // 新圖初始位置
                $newImg.attr('src', newSrc)
                    .removeClass('show hide-left hide-right')
                    .addClass(direction === 'right' ? 'hide-right' : 'hide-left');

                $imgBox.append($newImg);

                setTimeout(function(){
                    $oldImg.removeClass('show').addClass(direction === 'right' ? 'hide-left' : 'hide-right');
                    $newImg.removeClass('hide-left hide-right').addClass('show');
                }, 10);

                setTimeout(function(){
                    $oldImg.remove();
                    isAnimating = false;
                }, 410);

                $('.ProductThumbnail img').removeClass('active');
                $(this).addClass('active');
            });

            $('.ProductThumbnail img').eq(0).addClass('active');

            /*檢查商品是否存在於購物車*/
            let check_item_in_cart = function(){
                let v_data = {
                    product_id: '{{ $product->product_id }}',
                };

                $.ajax({
                    type:'GET',
                    url: '{{url("cart_process/check_item_in_cart")}}',
                    data: $.param(v_data),
                    datatype: 'json',
                    success: function(msg) {
                        if (msg.status) {
                            $('#btn_add_to_cart').attr("id","btn_remove_in_cart").html(msg.text);
                        } else {
                            $('#btn_remove_in_cart').attr("id","btn_add_to_cart").html(msg.text);
                        }
                    }
                });
            }

            check_item_in_cart();

            /*加入購物車*/
            $('#btn_cart_detail').on('click', '#btn_add_to_cart', function () {
                // if ($('#equalAmount').val() <= 0) {
                //     Swal.fire({
                //         type: 'error',
                //         title: '錯誤',
                //         text: '加入購物車失敗，請重整再試',
                //     });
                //     return;
                // }
                let _this = $(this),
                    v_data = {
                        product_id: _this.data('product_id'),
                        product_qty: $('#equalAmount').val(),
                        _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()) + parseInt($('#equalAmount').val());
                            $('#header_itemnum').text(qty);

                            _this.attr("id", "btn_remove_in_cart").html(msg.text);
                        } else {
                            Swal.fire({
                                type: 'warning',
                                title: '提示',
                                text: msg.text,
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            type: 'error',
                            title: '錯誤',
                            text: '加入購物車失敗，請重整再試',
                        });
                    }
                });
            });

            /*商品移出購物車*/
            $('#btn_cart_detail').on('click', '#btn_remove_in_cart', function () {
                let _this = $(this),
                    v_data = {
                        product_id:_this.data('product_id'),
                        _method: 'POST',
                        _token: '{!! csrf_token() !!}'
                    };
                $.ajax({
                    type: 'post',
                    url: '{{url("cart_process/remove_item_in_cart")}}',
                    data: $.param(v_data),
                    datatype: 'json',
                    success: function(msg) {
                        if (msg.status) {
                            let qty = parseInt($('#header_itemnum').text()) - parseInt(msg.qty);
                            $('#header_itemnum').text(qty);

                            $('#btn_remove_in_cart').attr("id","btn_add_to_cart").text(msg.text);
                        } else{
                            $('#btn_remove_in_cart').attr("id","btn_remove_in_cart").text(msg.text);
                        }
                    },
                    error: function() {
                        swal({
                            type: 'error',
                            title: '錯誤',
                            text: '移出購物車失敗，請重整再試',
                        });
                    }
                });
            });
        });
    </script>
@endsection