@extends('layout')

@section('pageTitle', "購物車｜".config('globals.app_name'))


@section('content')
<link rel="stylesheet" href="{{ asset('css/cart.css?'.rand(10000,99999)) }}">
<style>
    .quantity{
        border: 1px solid rgb(222,222,222);
    }
</style>
<section class="container">
    <form action="/sendinfo" method="GET" enctype="multipart/form-data">
    <div class="row">
        <div class="col-12">
            <h1 class="color-all-title big-title p-3">｜購物車｜</h1>
            <div class="step-box">
                <img src="/images/info/step1.jpg" alt="">
            </div>
        </div>
        <div class="col-12">
            <h3 class="color-all-title big-title m-3">購買商品</h3>
            <div class="row hack-th m-3 d-md-flex d-none">
                <div class="col-2">商品資料</div>
                <div class="row col-10">
                    <div class="col-2">商品名稱</div>
                    <div class="col-2">單位</div>
                    <div class="col-2">單位價格</div>
                    <div class="col-3">數量</div>
                    <div class="col-3">金額</div>
                </div>
            </div>
            @foreach ($CartList as $key => $row)
                <div class="row hack-td m-md-3 m-0 ">
                    <div class="col-md-2 col-5">
                        <img src="{{ $row['Img'] }}" alt="" class="min-product-photo mr-3">
                    </div>
                    <div class="row col-md-10 col-7 pr-md-2 pr-0">

                        <div class="col-md-2 col-12">
                            <a href="/product?id={{ $row['Id'] }}" >
                                {{ $row['Name'] }}
                            </a>
                        </div>
                        <div class="col-md-2 col-6">{{ $row['Unit'] }}</div>
                        <div class="col-md-2 col-6">NT$ {{ $row['Amount'] }}</div>
                        <div class="col-md-3 col-12 d-flex">
                            <button type="button" class="fas-btn minus" ><i class="fas fa-minus"></i></button>
                            <input type="text" name="count[{{ $row['Id'] }}]['{{ $row['Unit'] }}']" value="{{ $row['PayCount'] }}" data-amount="100" class="quantity" onkeyup = "value=value.replace(/[^\d]/g,'')">
                            <button type="button" class="fas-btn plus"  ><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="col-md-3 col-5 d-md-block d-none product-sum">NT$ {{ $row['littleSum'] }}</div>
                    </div>
                </div>
            @endforeach
            <div class="row m-3 small-sum-box">
                <div class="col-md-8 col-0"></div>
                <div class="col-md-2 col-4 text-right my-3">小記:</div>
                <div class="col-md-2 col-8 text-md-center text-right my-3">NT$ <span class="small-sum">300</span></div>
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-md-6 col-12 px-5">
                <div class="cart-box">
                    <div class="color-all-title big-title mb-3">折扣代碼(暫不開放)</div>
                    <div class="d-flex">
                        <input type="text" class="bonus-code from-input" readonly>
                        <button class="btn btn-gold search-bonus">兌換</button>
                    </div>
                </div>
                <div class="cart-box">
                    <div class="color-all-title big-title mb-3">宅配運費</div>
                    <div class="d-flex">
                        <select name="transport" id="transport" class="from-input">
                            <option value="頭城面交" selected>頭城面交</option>
                            <option value="到店取貨" >到店取貨</option>
                            <option value="黑貓宅配" >黑貓宅配</option>
                        </select>
                    </div>
                </div>
                <div class="cart-box">
                    <div class="color-all-title big-title mb-3">付款方式</div>
                    <div class="d-flex">
                        <select name="payType" id="payType" class="from-input">
                            <option value="銀行轉帳" selected>銀行轉帳</option>
                            {{-- <option value="現金付款" >現金付款</option> --}}
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-12 px-5">
                <div class="cart-box d-flex">
                    <div class="col-6 mt-4">折扣代碼</div>
                    <div class="col-6 text-right mt-4">NT$ 0</div>
                </div>
                <div class="cart-box d-flex">
                    <div class="col-6">運費</div>
                    <div class="col-6 text-right">NT$ <span class="deliveryMoney">0</div>
                </div>
                <hr>
                <div class="cart-box d-flex" style="font-size: 20px;font-weight: 600;">
                    <div class="col-6">總計</div>
                    <div class="col-6 text-right">NT$ <span class="all_amount">300</span></div>
                </div>
                <div class="cart-box">
                    <button class="btn btn-large btn-block btn-gold" style="margin-top: 79px;" >下一步</button>
                </div>
            </div>
        </div>
    </form>
    @csrf

    <script src="{{ asset('js/cart.js?'.rand(10000,99999)) }}"></script>
    <script>
        $(document).ready(function(){
            // getCartCount();
            math_small_sum();
            $('.plus').click(function(){
                var product_index = $('.plus').index(this);
                var now_quantity = $('.quantity').eq(product_index).val();
                var amount = $('.quantity').eq(product_index).data('amount');
                now_quantity++;
                var product_sum = now_quantity * amount;
                // console.log(now_quantity,product_index,amount);
                $('.quantity').eq(product_index).val(now_quantity);
                math_single_sum(product_index,product_sum);
            });

            $('.minus').click(function(){
                var product_index = $('.minus').index(this);
                var now_quantity = $('.quantity').eq(product_index).val();
                var amount = $('.quantity').eq(product_index).data('amount');
                if(now_quantity-1 < 1 ){
                    now_quantity = 1;
                }
                else{
                    now_quantity--;
                }
                var product_sum = now_quantity * amount;

                $('.quantity').eq(product_index).val(now_quantity);
                math_single_sum(product_index,product_sum);
            });

            $('#transport').change(function(){
                math_deliveryMoney();
                math_all_sum();
            });

            function math_single_sum(index,product_sum){
                $('.product-sum').eq(index).text('NT$ '+ product_sum);
                math_small_sum();
                // math_all_sum();
            }

            function math_small_sum(){
                var sum = 0;
                $('.product-sum').each(function(){
                    sum += parseFloat($(this).text().replace('NT$ ','').trim());
                });

                $('.small-sum').text(sum);
                math_deliveryMoney();
                math_all_sum();
            }

            function math_all_sum(){
                var small_sum = parseFloat($('.small-sum').text()) ;
                var deliveryMoney = parseFloat($('.deliveryMoney').text()) ;
                $('.all_amount').text(small_sum+deliveryMoney);
            }

            function math_deliveryMoney(){
                var transport = $('#transport').val();
                var small_sum = parseFloat($('.small-sum').text());
                var deliveryMoney = 0;
                switch(transport){
                    case "黑貓宅配":
                        deliveryMoney = 250;
                        if(small_sum  >= 1000){
                            deliveryMoney = 100;
                        }
                        else if(small_sum >= 2000){
                            deliveryMoney = 0;
                        }
                    break;
                    default:
                        deliveryMoney = 0;
                    break;
                }

                $('.deliveryMoney').text(deliveryMoney);

            }

        });
    </script>
</section>
@endsection