@extends('layout.base')
@section('page-title', 'Cart')
@section('page-js-script')
    <script>
        var cart = {{ Js::from($cartListAll) }};
        console.log(cart);
        let user_coin = {{ session('user_coin') }};
        $(function() {
            calculate();

            ///////////////////// 商品 /////////////////////
            /* 數量增加 */
            $('.add').click(function() {
                $('.loading').show();
                let cid = $(this).data('key');
                let index = cart.findIndex(x => x.id == cid);
                let item = cart[index];

                var orig = item.stock_qty; // 原數量
                var num = orig + 1;
                var price = item.stock_price;
                var subtotal = price * num;

                $.ajax({
                    url: '{{ url('ajax/update_cart') }}',
                    data: {
                        id: $(this).data('key'),
                        qty: num,
                        price: price
                    },
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {
                            $('.buy-num[data-key=' + cid + ']').val(num);
                            item['stock_qty'] = num;
                            item['subtotal'] = subtotal;
                            $('.buy-subtotal[data-key=' + cid + ']').text(appendFormat(subtotal));
                            $('.span_inv[data-key=' + cid + ']').text(resp.data.stock_inv);
                        } else {
                            // alert(resp.msg);
                            // Swal.fire({
                            //     title: '操作失敗',
                            //     text: resp.msg,
                            //     icon: 'error',
                            //     confirmButtonText: '{{ __('basic.OK') }}',
                            // })

                            // cart.splice(i,1);

                            // $('.list-group-item').eq(i).remove();
                            // $('.cart_num').text(cart.length);

                            Swal.fire({
                                title: '操作失敗',
                                text: resp.msg,
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                            // location.reload();
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        }

                        calculate();
                    }
                });
            })
            /* 數量減少 */
            $('.min').click(function() {
                $('.loading').show();
                let cid = $(this).data('key');
                let index = cart.findIndex(x => x.id == cid);
                let item = cart[index];
                console.log(item);
                var orig = item.stock_qty; // 原數量
                var num = orig - 1;
                if (num <= 0) {
                    num = item.stock_min_buy_num ?? 1;
                };
                var price = item.stock_price;
                var subtotal = price * num;

                $.ajax({
                    url: '{{ url('ajax/update_cart') }}',
                    data: {
                        id: $(this).data('key'),
                        qty: num,
                        price: price
                    },
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {

                            $('.buy-num[data-key=' + cid + ']').val(num);
                            item['stock_qty'] = num;
                            item['subtotal'] = subtotal;
                            $('.buy-subtotal[data-key=' + cid + ']').text(appendFormat(subtotal));
                            $('.span_inv[data-key=' + cid + ']').text(resp.data.stock_inv);
                        } else {
                            // alert(resp.msg);
                            // Swal.fire({
                            //     title: '操作失敗',
                            //     text: resp.msg,
                            //     icon: 'error',
                            //     confirmButtonText: '{{ __('basic.OK') }}',
                            // })

                            // cart.splice(i,1);

                            // $('.list-group-item').eq(i).remove();
                            // $('.cart_num').text(cart.length);

                            Swal.fire({
                                title: '操作失敗',
                                text: resp.msg,
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                            // location.reload();
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        }

                        calculate();
                    }
                });
            })
            /* 數量輸入框 */
            $('.buy-num').change(function() {
                $('.loading').show();
                let cid = $(this).data('key');
                let index = cart.findIndex(x => x.id == cid);
                let item = cart[index];

                var num = parseInt(this.value); // 數量
                if (num <= 0) {
                    this.value = 1;
                };
                var price = item.stock_price;
                var subtotal = price * num;

                $.ajax({
                    url: '{{ url('ajax/update_cart') }}',
                    data: {
                        id: $(this).data('key'),
                        qty: num,
                        price: price
                    },
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {

                            $('.buy-num[data-key=' + cid + ']').val(num);
                            item['stock_qty'] = num;
                            item['subtotal'] = subtotal;
                            $('.buy-subtotal[data-key=' + cid + ']').text(appendFormat(subtotal));
                            $('.span_inv[data-key=' + cid + ']').text(resp.data.stock_inv);

                            calculate();
                        } else {
                            // alert(resp.msg);
                            Swal.fire({
                                title: '操作失敗',
                                text: resp.msg,
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                            // location.reload();
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        }
                    }
                });
            });
            /* 移除商品 */
            $('.remove_btn').click(function(e) {
                e.preventDefault();

                let _this = this;
                let i = $('.remove_btn').index(_this);
                let cart_id = $(_this).closest('.list-group-item').data('key');
                if (empty(cart_id)) return;

                if (!confirm('{{ __('basic.ConfirmRemoveProduct') }}?')) return;

                $.ajax({
                    url: '{{ url('ajax/remove_cart') }}',
                    data: {
                        id: cart_id
                    },
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        if (resp.status) {
                            // alert("{{ __('basic.RemoveSuccessfully') }}!");
                            Swal.fire({
                                title: "{{ __('basic.RemoveSuccessfully') }}",
                                // text: resp.msg,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                            cart.splice(i, 1);

                            $(_this).closest('.list-group-item').remove();
                            $('.cart_num').text(cart.length);

                            calculate();

                        } else {
                            // alert("{{ __('basic.RemoveFailed') }}!");
                            Swal.fire({
                                title: "{{ __('basic.RemoveFailed') }}",
                                // text: resp.msg,
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })
                        }
                    }
                });
            })
            /* 前往結帳 */
            $('.btn_checkout').click(function(e) {
                let type = $(this).data('type');
                $.ajax({
                    url: '{{ url('ajax/check_cart') }}',
                    data: {
                        stock_type: type
                    },
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        if (resp.status) {
                            // console.log('{{ route('checkout') }}' + '?type=' + type);
                            window.location.href = '{{ route('checkout') }}' + '?type=' + type;
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    }
                });
            })


        });

        function calculate() {
            let total = 0;
            let type = ['physical', 'virtual'];
            $.each(type, function(idx, v) {
                console.log(v);
                //create a new array with only the items that match the type
                let filtered = cart.filter(function(item) {
                    return item.stock_type == v;
                });
                //sum the subtotal of the filtered array
                let subtotal = filtered.reduce(function(a, b) {
                    return a + b.subtotal;
                }, 0);
                $('#itemSubtotal_' + v).text(appendFormat(subtotal));
            });

            // cart.forEach(function(item) {
            //     if (item.stock_type == type) {
            //         total += item.subtotal;
            //     }
            // });
            // $('#itemSubtotal').text(appendFormat(total));
            // total -= $('#coin_used').val();
            // total = total + shipping;
            // $('#totalAmount').text(appendFormat(total));
            // $('#totalAmountVal').val(total);
        }
    </script>
@endsection
@section('container')

    <div class="row">
        @foreach ($cartListType as $list)
            {{-- <div class="col-lg-8 col-md-7"> --}}
            @if (count($list['item']) > 0)
                <div class="col-lg-12 col-md-7">
                    <div class="py-3">
                        <!-- alert -->
                        {{-- <div class="alert alert-danger p-2" role="alert">
                    You’ve got FREE delivery. Start <a class="alert-link" href="">checkout now!</a>
                </div> --}}
                        <div class="row m-0 bg-white p-4">
                            <h4>{{ $list['name'] }}</h4>
                        </div>
                        <div class="row m-0 bg-white">
                            <div class="col-6 col-md-7">{{ __('basic.Product') }}</div>
                            <div class="col-3 col-md-3">{{ __('basic.Quantity') }}</div>
                            <div class="col-3 col-md-2">{{ __('basic.Subtotal') }}</div>
                        </div>

                        <ul class="list-group list-group-flush mb-2">
                            @foreach ($list['item'] as $k => $cl)
                                <li class="list-group-item py-lg-0 py-3 px-0" data-key="{{ $cl['id'] }}">
                                    <div class="row align-items-center">
                                        <div class="col-2 col-md-2">
                                            <img class="img-fluid" src="{{ $cl['stock_thumbnail'] ?? asset('image/product_07.png') }}" alt="Ecommerce">
                                        </div>
                                        <div class="col-4 col-md-5">
                                            <a class="text-inherit" href="{{ route('product_detail', ['id' => empty($cl['stock_id']) ? 1 : $cl['stock_id']]) }}">
                                                <h6 class="mb-0">{{ $cl['stock_name'] }}</h6>
                                            </a>
                                            <span><small class="text-muted">{{ str_replace('_', '-', $cl['stock_spec_id']) }}</small></span>
                                        </div>
                                        <!-- 數量 -->
                                        <div class="col-3 col-md-3 col-lg-2 px-0">
                                            <div class="input-group border-gray border-1">
                                                <input class="form-control min" data-field="quantity" data-key="{{ $cl['id'] }}" type="button" value="-">
                                                <input class="form-control buy-num w-40 text-center" name="quantity" data-min="{{ $cl['stock_min_buy_num'] }}" data-key="{{ $cl['id'] }}" type="number" value="{{ $cl['stock_qty'] }}"
                                                    step="1">
                                                <input class="form-control add" data-field="quantity" data-key="{{ $cl['id'] }}" type="button" value="+">
                                            </div>
                                            <div class="div_inv @if ($cl['stock_qty'] < $cl['stock_inv']) d-none @endif text-danger" id="div_inv_{{ $cl['id'] }}">
                                                {{ __('robot.InventoryQuantity') }} :
                                                <span class="span_inv" id="span_inv_{{ $cl['id'] }}" data-key="{{ $cl['id'] }}">{{ $cl['stock_inv'] }}</span>
                                            </div>
                                            <div class="div_min_buy @if ($cl['stock_qty'] > $cl['stock_min_buy_num']) d-none @endif text-danger" id="div_min_buy_{{ $cl['id'] }}">
                                                {{ __('robot.MinimumPurchaseQuantity') }} :
                                                <span class="span_inv" id="span_min_buy_{{ $cl['id'] }}">{{ $cl['stock_min_buy_num'] }}</span>
                                            </div>
                                            <div class="small lh-1 mt-2">
                                                <a class="d-flex align-items-center remove_btn" href="javascript:void(0)">
                                                    <span class="me-1 icon-delete"></span>
                                                    <span class="text-muted">{{ __('basic.Delete') }}</span>
                                                </a>
                                            </div>
                                        </div>
                                        <!-- 價格 -->
                                        <div class="col-3 text-lg-end text-md-end col-md-2 text-start">
                                            <span class="text-base-b">$</span>
                                            <span class="text-base-b buy-subtotal" data-key="{{ $cl['id'] }}">{{ number_format($cl['subtotal']) }}</span>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                            <div class="row m-0 bg-white py-4">
                                <div class="col-6 col-md-7">
                                    <button class="btn_checkout btn btn-primary btn-lg" data-type="{{ $list['key'] }}" id="checkout_{{ $list['key'] }}" {{ count($cartListAll) == 0 ? 'disabled' : '' }}
                                        @if ($verify == 0 && $list['key'] == 'virtual') disabled @endif>{{ __('basic.GoToCheckout') }}</button>

                                </div>
                                <div class="col-3 col-md-3"></div>
                                <div class="col-3 col-md-2">

                                    {{ __('basic.Total') }} : <span id="itemSubtotal_{{ $list['key'] }}"></span>
                                </div>
                                @if ($verify == 0 && $list['key'] == 'virtual')
                                    <p class="text-danger">{{ __('robot.MobileAuthDesc') }}</p>
                                @endif

                            </div>
                        </ul>

                    </div>
                </div>
            @endif
        @endforeach
        <div class="d-flex justify-content-between my-4">
            <a class="btn btn-primary" href="{{ route('/') }}">{{ __('basic.Back') }}</a>
            {{-- <a class="btn btn-dark" href="">{{ __('basic.UpdateCart') }}</a> --}}
        </div>
        <!-- sidebar -->
        <div class="col-12 col-lg-4 col-md-5 d-none">
            <div class="card mb-5 mt-6">
                <div class="card-body p-6">
                    <h2 class="h5 mb-4">{{ __('basic.Summary') }}</h2>
                    {{-- 折抵 --}}
                    {{-- <form id="coin_fm">
                        <div class="mt-8 mb-4">
                            <h6 class="mb-3">{{ __('basic.DiscountUsedCLCCoin') }}</h6>
                            <div class="row">
                                <div class="col-8 pe-0">
                                    <input class="form-control" id="coin_used" type="number" value="0" min="0" max="{{ session('user_coin') }}" placeholder="">
                                </div>
                                <div class="col-4 ps-0">

                                    <button class="btn btn-outline-dark float-end" id="cal_coin" type="button">{{ __('basic.Comfirm') }}</button>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                            </div>
                        </div>
                    </form> --}}
                    {{-- 結算 --}}
                    <div class="mb-2">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div>{{ __('basic.Summary') }}</div>
                                <div>
                                    <span>$</span>
                                    <span id="itemSubtotal"></span>
                                </div>
                            </li>
                            {{-- <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="me-auto">
                                    <div>{{ __('basic.ShippingFee') }}</div>
                                </div>
                                <div>
                                    <span>$</span>
                                    <span id="deliveryAmount">0</span>
                                </div>
                            </li> --}}
                            {{-- <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="me-auto">
                                    <div>{{ __('basic.DiscountUsedCLCCoin') }}</div>
                                </div>
                                <div>
                                    <span>- $</span>
                                    <span id="discountAmount">0</span>
                                </div>
                            </li> --}}
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="me-auto">
                                    <div class="fw-bold">{{ __('basic.Subtotal') }}</div>
                                </div>
                                <div>
                                    <span class="fw-bold">$</span>
                                    <span class="fw-bold" id="totalAmount"></span>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <button class="btn btn-primary btn-lg w-100" id="checkout" {{ count($cartListAll) == 0 ? 'disabled' : '' }}>{{ __('basic.GoToCheckout') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection