@extends('layout.base')
@section('page-title', __('basic.Cart'))
@section('page-js-script')
    <script>
        var cart = {{ Js::from($cartList) }};
        let user_coin = {{ $cart_type == 'virtual' ? session('user_coin_general') : session('user_coin') }};
        let cartTotalAmount = {{ $cartTotalAmount ?? 0 }};
        let coin_max = (user_coin > cartTotalAmount) ? cartTotalAmount : user_coin;
        // get url parameter 'type'
        const urlParams = new URLSearchParams(window.location.search);
        const stock_type = urlParams.get('type');

        console.log('coin_max:', coin_max);

        $(function() {
            // 避免在結帳頁切語系遺失了type
            $('#locale_form').append('<input type="hidden" name="type" value="' + stock_type + '"/>');

            if (stock_type == 'virtual') {
                $('#div_shippment').remove();
            }

            const c_v = $("#coin_fm").validate({
                debug: true,
                rules: {
                    coin_used: {
                        range: [0, coin_max],
                    },
                },
                messages: {
                    coin_used: {
                        range: $.validator.format("{{ sprintf(__('basic.MaxDiscountCoin'), '{1}') }}"),
                        // range: $.validator.format("Please enter a value between {0} and {1}."),
                    }
                },
            });
            const i_v = $("#invoice_fm").validate({
                debug: true,
                rules: {
                    mobile_carrier_number: {
                        required: true,
                        mobile_barcode: true,
                    },
                    cdc_carrier_number: {
                        required: true,
                        is_certificated: true
                    },
                    B2B_uniform_number: {
                        required: true,
                    },
                    B2B_payer_addr: {
                        required: true
                    },
                    org_other: {
                        required: true,
                    },
                    payer_name: {
                        required: true,
                    },
                    payer_email: {
                        required: true
                    },
                    donation: {
                        required: true
                    },
                },
                messages: {
                    mobile_carrier_number: {
                        required: "*請輸入手機條碼",
                        mobile_barcode: "*請輸入正確格式(斜線加上7碼數字或大寫字母)",
                    },
                    cdc_carrier_number: {
                        required: "*請輸入自然人憑證",
                        is_certificated: "*請輸入正確格式(2碼英文字母加上14碼數字)",
                    },
                    B2B_payer_name: {
                        required: "*請輸入公司抬頭",
                    },
                    B2B_uniform_number: {
                        required: "*請輸入統一編號",
                    },
                    B2B_payer_addr: {
                        required: "*請輸入公司地址",
                    },
                    org_other: {
                        required: "*請輸入捐贈碼",
                    },
                    payer_name: {
                        required: "*請輸入購買人姓名",
                    },
                    payer_email: {
                        required: "*請輸入購買人電子郵件",
                    },
                    donation: {
                        required: "*請選擇捐贈單位",
                    },
                },

            });
            const p_v = $("#invoice_fm").validate({
                debug: true,
                rules: {
                    mobile_carrier_number: {
                        required: true,
                        mobile_barcode: true,
                    },
                    cdc_carrier_number: {
                        required: true,
                        is_certificated: true
                    },
                    B2B_uniform_number: {
                        required: true,
                    },
                    B2B_payer_addr: {
                        required: true
                    },
                    org_other: {
                        required: true,
                    },
                    payer_name: {
                        required: true,
                    },
                    payer_email: {
                        required: true
                    },
                    donation: {
                        required: true
                    },
                },
                messages: {
                    mobile_carrier_number: {
                        required: "*請輸入手機條碼",
                        mobile_barcode: "*請輸入正確格式(斜線加上7碼數字或大寫字母)",
                    },
                    cdc_carrier_number: {
                        required: "*請輸入自然人憑證",
                        is_certificated: "*請輸入正確格式(2碼英文字母加上14碼數字)",
                    },
                    B2B_payer_name: {
                        required: "*請輸入公司抬頭",
                    },
                    B2B_uniform_number: {
                        required: "*請輸入統一編號",
                    },
                    B2B_payer_addr: {
                        required: "*請輸入公司地址",
                    },
                    org_other: {
                        required: "*請輸入捐贈碼",
                    },
                    payer_name: {
                        required: "*請輸入購買人姓名",
                    },
                    payer_email: {
                        required: "*請輸入購買人電子郵件",
                    },
                    donation: {
                        required: "*請選擇捐贈單位",
                    },
                },

            });
            const r_v = $("#receiver_fm").validate({
                debug: false,
                ignore: ":disabled",
                rules: {
                    receiver_name: {
                        required: true,
                    },
                    receiver_phone: {
                        required: true,
                    },
                    receiver_store: {
                        required: true
                    },
                    receiver_street: {
                        required: true,
                    },
                },
                messages: {
                    receiver_name: {
                        required: "*請輸入收件人",
                    },
                    receiver_phone: {
                        required: "*請輸入聯絡電話",
                    },
                    receiver_store: {
                        required: "*請輸入門市名稱",
                    },
                    receiver_street: {
                        required: "*請輸入寄送詳細地址",
                    }
                }
            });

            /* 發票選項 */
            $("input[name='invoice_type']").change(function() {

                i_v.resetForm();

                var type = this.value;

                $('.invoice_tab').addClass('d-none');
                $('#' + type).removeClass('d-none');

                $('#mobileCarrierNumber').val("{{ $user['mobile_carrier_number'] ?? '' }}");
                $('#cdcCarrierNumber').val('');
                $('#B2BUniformNumber').val('');
                $('#B2BPayerAddr').val('');

                if (type == "B2C") {
                    $('#emailCarrier').prop('checked', true);
                }
            });
            /* 個人載具選項 */
            $("input[name='carrier_type']").change(function() {
                i_v.resetForm();

                $('#mobileCarrierNumber').val("{{ $user['mobile_carrier_number'] ?? '' }}");
                $('#cdcCarrierNumber').val('');
            });
            /* 付款方式 */
            $("input[name='payment_id']").change(function() {
                r_v.resetForm();

                let value = this.value;
                let store_id = ['seven', 'family'];

                $('#receiverStore').val('');
                $('#receiverStreet').val('');

                // 先全部選項都打開
                $("select[name='delivery_id']").find('option[value="delivery"]').prop('disabled', false);
                $("input[name='delivery_type']").find('option[value="delivery"]').prop('disabled', false);
                $.each(store_id, function(i, v) {
                    $("select[name='delivery_id']").find('option[value="' + v + '"]').prop('disabled', false);
                    $("input[name='delivery_type']").find('option[data-address-type="' + v + '"]').prop('disabled', false);
                    $('input[name="delivery_type"]').each(function() {
                        if ($(this).data('address-type') == v) {
                            $(this).prop('disabled', false);
                        }
                        if ($(this).data('address-type') == 'delivery') {
                            $(this).prop('disabled', false);
                        }
                    });
                });

                if (value == "store_pickup") {
                    // 超商貨到付款
                    $("select[name='delivery_id']").find('option[value="delivery"]').prop('disabled', true);
                    $("input[name='delivery_type']").find('option[value="delivery"]').prop('disabled', true);
                    $.each(store_id, function(i, v) {
                        $("select[name='delivery_id']").find('option[value="' + v + '"]').prop('disabled', false);
                        $("input[name='delivery_type']").find('option[data-address-type="' + v + '"]').prop('disabled', false);
                        $('input[name="delivery_type"]').each(function() {
                            console.log($(this).data('address-type'));
                            if ($(this).data('address-type') == v) {
                                $(this).prop('disabled', false);
                            }
                            if ($(this).data('address-type') == 'delivery') {
                                $(this).prop('disabled', true);
                            }
                        });
                    });
                } else if (value == "cod") {
                    // 宅配貨到付款
                    $("select[name='delivery_id']").find('option[value="delivery"]').prop('disabled', false);
                    $("input[name='delivery_type']").find('option[value="delivery"]').prop('disabled', false);
                    $.each(store_id, function(i, v) {
                        $("select[name='delivery_id']").find('option[value="' + v + '"]').prop('disabled', true);
                        $.each(store_id, function(i, v) {
                            $("select[name='delivery_id']").find('option[value="' + v + '"]').prop('disabled', true);
                            $("input[name='delivery_type']").find('option[data-address-type="' + v + '"]').prop('disabled', true);
                            $('input[name="delivery_type"]').each(function() {
                                if ($(this).data('address-type') == v) {
                                    $(this).prop('disabled', true);
                                }
                                if ($(this).data('address-type') == 'delivery') {
                                    $(this).prop('disabled', false);
                                }
                            });
                        });
                    });
                }

                $("select[name='delivery_id']").find('option:not([disabled]):first').prop('selected', true).trigger('change');
            });
            /* 取貨方式 */
            $("#delivery_id_custom").change(function() {
                r_v.resetForm();

                var value = this.value;

                $('#receiverStore_custom').val('');
                $('#receiverStreet_custom').val('');

                if (value == "delivery") {
                    $('#receiverStore_custom').prop('disabled', true);
                    $('#receiverStreet_custom').prop('disabled', false);
                    $('.row_store').addClass('d-none');
                    $('.row_address').removeClass('d-none');


                } else {
                    $('#receiverStore_custom').prop('disabled', false);
                    $('#receiverStreet_custom').prop('disabled', true);
                    $('.row_store').removeClass('d-none');
                    $('.row_address').addClass('d-none');

                }

                calculate(c_v);
            });
            // 折抵
            $('#cal_coin').click(function(e) {
                e.preventDefault();
                let coin_used = ($('#coin_used').val() == '') ? 0 : $('#coin_used').val();
                $('#coin_used').val(coin_used);
                console.log(c_v.form());
                if (c_v.form()) {
                    $('#coin').val(coin_used);
                    calculate(c_v);
                }
            });
            // 結帳
            $('#checkout').click(function() {
                $('.loading').show();
                $('#payment_id_error').text();
                let data_key = $('input[type=radio][name=delivery_type]:checked').attr('data-key');
                // 使用優惠碼
                // let member_coupon_id = null;
                let discount_amount = 0;
                let coin = $('#coin').val();
                let total_coin = '{{ $cart_subtotal['coin'] }}';
                let total_bonus = '{{ $cart_subtotal['bonus'] }}';

                // 付款方式
                let payment_id = $('input[name=payment_id]:checked').val();
                let service_charge = 0;
                // 配送方式
                let delivery_id = $('#delivery_id_' + data_key).val();
                let delivery_amount = $('#deliveryAmount').val();
                // 發票資訊
                let carrier_type = '';
                let carrier_number = '';
                let uniform_number = '';
                let donation = '';
                let payer_name = $('#payerName').val();
                let payer_addr = $('#payerEmail').val();
                let payer_email = '';
                // 備註 
                let description = '';
                // 收件人資訊
                let receiver_name = $('#receiverName_' + data_key).val();
                let receiver_phone = $('#receiverPhone_' + data_key).val();
                let receiver_store = $('#receiverStore_' + data_key).val();
                let receiver_address = $('#receiverStreet_' + data_key).val();
                let address_img_name = $('#address_img_name_' + data_key).val();
                let address_photo = '';
                // let address_photo = $('#address_photo')[0].files[0];
                if (stock_type == 'physical') {
                    if (delivery_id == "delivery") {
                        address_photo = $('#address_photo')[0].files[0];
                    } else {
                        address_photo = $('#receiverStore_address_photo')[0].files[0];
                    }
                }

                console.log(111);
                // 發票選項
                const invoice_type = $('input[name=invoice_type]:checked').val();
                switch (invoice_type) {
                    case "B2C":
                        carrier_type = $('input[name=carrier_type]:checked').val();
                        if (carrier_type == "0") {
                            if (!i_v.element("#mobileCarrierNumber")) {
                                $('.loading').hide();
                                return;
                            }
                            carrier_number = $('#mobileCarrierNumber').val();
                        } else if (carrier_type == "1") {
                            carrier_number = $('#cdcCarrierNumber').val();
                            if (!i_v.element("#cdcCarrierNumber")) {
                                $('.loading').hide();
                                return;
                            }
                        }
                        break;

                    case "B2B":
                        if (!i_v.element('#B2BUniformNumber') || !i_v.element('#B2BPayerAddr')) {
                            $('.loading').hide();
                            return;
                        }
                        uniform_number = $('#B2BUniformNumber').val();
                        payer_addr = $('#B2BPayerAddr').val();
                        break;

                    case "Donation":
                        if (!i_v.element("#donation")) {
                            $('.loading').hide();
                            return;
                        }
                        donation = $('#donation').val();
                        break;
                }
                if (!i_v.element('#payerName') || !i_v.element('#payerEmail')) {
                    $('html, body').animate({
                        scrollTop: $('#payerName').offset().top - 100
                    }, 200);
                    $('.loading').hide();
                    return
                };
                payer_name = $('#payerName').val();
                payer_email = $('#payerEmail').val();

                console.log(payment_id);
                if (payment_id == null) {
                    $('#payment_id_error').text('請選擇付款方式');
                    $('html, body').animate({
                        scrollTop: $('#payment_id_error').offset().top - 300
                    }, 200);
                    $('.loading').hide();
                    return;
                }

                // CLC折抵沒有符合規則
                if ($('#coin_used-error').is(':visible')) {
                    $('html, body').animate({
                        scrollTop: $('#coin_used-error').offset().top - 300
                    }, 200);
                    $('.loading').hide();
                    return;
                }

                //商品為實體商品時
                if (stock_type == 'physical') {
                    if (delivery_id == "delivery" && payment_id != 'cod' && payment_id != 'credit_card' && payment_id != 'bank_transfer' && payment_id != 'cvs') {
                        console.log(11111);
                        $('.loading').hide();
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '宅配貨到付款請選擇宅配配送',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        }).then(function() {
                            //...
                        })
                        return;
                    }
                    if ((delivery_id == "seven" || delivery_id == "family") && payment_id != 'store_pickup' && payment_id != 'credit_card' && payment_id != 'bank_transfer' && payment_id != 'cvs') {
                        console.log(11112);
                        $('.loading').hide();
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '超商取貨付款請選擇超商地址',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        }).then(function() {
                            //...
                        })
                        return;
                    }
                    console.log(222);
                    if (!r_v.element('#receiverName_' + data_key) || !r_v.element('#receiverPhone_' + data_key)) {
                        $('html, body').animate({
                            scrollTop: $('#receiverPhone_' + data_key).offset().top - 100
                        }, 200);
                        $('.loading').hide();
                        return
                    };

                    if ((delivery_id == "seven" || delivery_id == "family") && (!r_v.element('#receiverStore_' + data_key) && !address_photo)) {
                        console.log(22211);
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '運送地址不完全',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        })
                        $('.loading').hide();
                        return;
                    } else if (delivery_id == "delivery" && (!r_v.element('#receiverStreet_' + data_key) && !address_photo)) {
                        console.log(22212);
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '運送地址不完全',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        })
                        $('.loading').hide();
                        return;
                    }
                }

                if (stock_type == 'virtual') {
                    receiver_name = $('#receiver_name').val();
                    receiver_phone = $('#receiver_phone').val();
                    receiver_store = '';
                    receiver_address = '';
                    address_img_name = null;
                    address_photo = null;
                    delivery_id = 'virtual';
                }


                console.log(333);
                discount_amount += coin;

                /*-------- 結帳 --------*/
                let formData = new FormData();
                // formData.append('member_coupon_id', member_coupon_id);
                formData.append('discount_amount', discount_amount);
                formData.append('coin', coin);
                formData.append('total_coin', total_coin);
                formData.append('total_bonus', total_bonus);


                formData.append('payment_id', payment_id);
                formData.append('service_charge', service_charge);
                formData.append('delivery_id', delivery_id);
                formData.append('delivery_amount', delivery_amount);
                formData.append('carrier_type', carrier_type);
                formData.append('carrier_number', carrier_number);
                formData.append('donation', donation);
                formData.append('uniform_number', uniform_number);

                formData.append('payer_name', payer_name);
                formData.append('payer_addr', payer_addr);
                formData.append('payer_email', payer_email);

                formData.append('receiver_name', receiver_name);
                formData.append('receiver_phone', receiver_phone);
                formData.append('receiver_store', receiver_store);
                formData.append('receiver_address', receiver_address);
                formData.append('address_img_name', address_img_name);
                formData.append('address_photo', address_photo);

                formData.append('frontend_url', '{{ env('APP_URL') }}');
                formData.append('description', description);
                formData.append('stock_type', stock_type);

                cart.forEach(function(item) {
                    formData.append('stock_id[]', item.stock_id);
                    if (!empty(item.stock_spec_id)) {
                        formData.append('stock_spec_id[]', item.stock_spec_id);
                    } else {
                        formData.append('stock_spec_id[]', '');
                    }
                    formData.append('stock_unit_price[]', item.stock_unit_price);
                    formData.append('stock_price[]', item.stock_price);
                    formData.append('stock_qty[]', item.stock_qty);
                    formData.append('stock_subtotal[]', item.subtotal);
                    formData.append('stock_description[]', item.description);
                });

                $.ajax({
                    url: '{{ url('ajax/sale_add') }}',
                    data: formData,
                    datatype: 'json',
                    contentType: false,
                    processData: false,
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        if (resp.status) {
                            $('.loading').hide();
                            if (!empty(resp.data)) {
                                window.location.href = resp.data.url;
                            } else {
                                Swal.fire({
                                    title: "訂單已成立",
                                    // text: ,
                                    icon: 'success',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                }).then(function() {
                                    window.location.href = '{{ route('orderlist') }}';
                                })
                            }
                        } else {
                            $('.loading').hide();
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                text: '{{ __('basic.CheckoutFail') }}!',
                                // html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then(function() {
                                //...
                            })
                        }
                    }
                });
            })
            $('input[type=radio][name=delivery_type]').change(function() {

                $('.label_address input,.label_address select').attr("disabled", true);

                let id = $(this).attr('id');
                $('#label_' + id + ' input,#label_' + id + ' select').attr("disabled", false);
                // $('#label_' + id + ' select').attr("disabled", false);

                if (id == 'custom') {
                    $('#label_' + id + ' select').trigger('change');
                }
                calculate(c_v);

            });
            $('#address_delivery_type').change(function() {
                $('#address_fm .home,#address_fm .store').hide()
                $($(this).find('option:selected').data('target')).show();

            });

            $('[name=address_type],[name=store_type]').click(function() {
                $('.address_type').hide();
                // console.log($(this).data('target'));
                $($(this).data('target')).parents('.address_type').show();
            });
            $('[name=store_type]').click(function() {
                $('.store_type').hide();
                // console.log($(this).data('target'));
                $($(this).data('target')).parents('.store_type').show();
            });
            $('#get_payer').click(function(e) {

                if ($(this).prop("checked")) {
                    $('#receiverName_custom').val($('#payerName').val());
                } else {
                    $('#receiverName_custom').val('');
                }

            });

            calculate(c_v);
        })

        function calculate(c_v) {
            let total = 0;
            let coin_used = ($('#coin_used').val() == '') ? 0 : $('#coin_used').val();
            let shipping = 0;
            let delivery_type = $('input[type=radio][name=delivery_type]:checked');
            if ($('input[type=radio][name=delivery_type]:checked').attr('id') == 'custom') {
                shipping = $('#delivery_id_custom option:selected').data('charge');
            } else {
                shipping = parseInt($('input[type=radio][name=delivery_type]:checked').attr('data-charge'));
            }
            if (stock_type == 'virtual') {
                shipping = 0;
            }

            cart.forEach(function(item) {
                total += item.subtotal;
            });

            shipping = total > 699 ? 0 : shipping;

            $('#itemSubtotal').text(appendFormat(total));
            $('#shippingCharge').text(appendFormat(shipping));
            $('#deliveryAmount').val(shipping);

            total = total + shipping;
            let user_coin = {{ $cart_type == 'virtual' ? session('user_coin_general') : session('user_coin') }};
            let coin_max = (user_coin > total) ? total : user_coin;
            c_v.settings.rules.coin_used.range = [0, coin_max];
            if (coin_used > coin_max) {
                coin_used = 0;
                $('#coin_used').val(coin_used);
            }
            total -= coin_used;


            $('#text_coin_used').text(appendFormat(coin_used));
            $('#coin').val(coin_used);
            $('#totalAmount').text(appendFormat(total));
        }
    </script>
@endsection
@section('container')
    <div class="row">
        <div class="col-lg-8 col-md-7">
            {{-- Invoice --}}
            <div class="card mb-6 px-6 py-4">
                <h4 class="border-bottom">{{ __('basic.Invoice') }}</h4>
                {{-- Content --}}
                {{-- < div class="row mt-6 mb-3">
                    <label class="col-form-label col-sm-3">發票選項</label>
                    <div class="col-sm-9">
                        <select class="form-control form-select">
                            <option value=''>手機載具</option>
                            <option value=''>紙本發票</option>
                        </select>
                    </div>
                </div> --}}
                <label class="col-form-label col-sm-3">{{ __('robot.Invoice') }}</label>
                <div class="row mt-6 mb-3">
                    <div class="col-sm-9 d-flex justify-content-between">
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="radioB2C" name="invoice_type" type="radio" value="B2C">
                            <label class="form-check-label" for="radioB2C">{{ __('robot.Personal') }}</label>
                        </div>
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="radioB2B" name="invoice_type" type="radio" value="B2B">
                            <label class="form-check-label" for="radioB2B">{{ __('robot.Company') }}</label>
                        </div>
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="radioDonation" name="invoice_type" type="radio" value="Donation" checked>
                            <label class="form-check-label" for="radioDonation">{{ __('robot.Donate') }}</label>
                        </div>
                    </div>
                </div>
                <form id="invoice_fm">
                    <div class="row mt-6 mb-3">
                        <div class="d-flex flex-column justify-content-between invoice_tab d-none" id="B2C">
                            <div class="form-check form-check-inline lh-base mb-3">
                                <input class="form-check-input" id="emailCarrier" name="carrier_type" type="radio" value="" checked>
                                <label class="form-check-label" for="emailCarrier">{{ __('robot.E-InvoiceCarrier') }}</label>
                            </div>
                            <div class="form-check form-check-inline lh-base d-flex align-items-center mb-3 gap-2">
                                <input class="form-check-input flex-shrink-0" id="mobileCarrier" name="carrier_type" type="radio" value="0">
                                <label class="form-check-label flex-shrink-0" for="mobileCarrier" style="min-width:120px;">{{ __('robot.MobileBarcodeCarrier') }}</label>
                                <div class="col-sm-4">
                                    <input class="form-control flex-grow-1" id="mobileCarrierNumber" name="mobile_carrier_number" type="text" value="{{ $user['mobile_carrier_number'] }}">
                                </div>
                            </div>
                            <div class="form-check form-check-inline lh-base d-flex align-items-center mb-3 gap-2">
                                <input class="form-check-input flex-shrink-0" id="cdcCarrier" name="carrier_type" type="radio" value="1">
                                <label class="form-check-label flex-shrink-0" for="cdcCarrier" style="min-width:120px;">{{ __('robot.NaturalPersonVoucherBarcode') }}</label>
                                <div class="col-sm-4">
                                    <input class="form-control flex-grow-1" id="cdcCarrierNumber" name="cdc_carrier_number" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column justify-content-between invoice_tab d-none" id="B2B">
                            <div class="lh-base d-flex align-items-center mb-3 gap-2">
                                <label class="flex-shrink-0" for="inlineRadio2">{{ __('robot.UniformNumbers') }}</label>
                                <div class="col-sm-4">
                                    <input class="form-control flex-grow-1" id="B2BUniformNumber" name="B2B_uniform_number" type="text">
                                </div>
                            </div>
                            <div class="lh-base d-flex align-items-center mb-3 gap-2">
                                <label class="flex-shrink-0" for="inlineRadio2">{{ __('robot.CompanyAddress') }}</label>
                                <div class="col-sm-4">
                                    <input class="form-control flex-grow-1" id="B2BPayerAddr" name="B2B_payer_addr" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column justify-content-between invoice_tab" id="Donation">
                            <div class="lh-base d-flex align-items-center mb-3 gap-2">
                                <label class="flex-shrink-0" for="org_other">{{ __('robot.DonationTo') }}</label>
                                <div class="col-sm-4">
                                    <select class="form-select" id="donation" name="donation">
                                        {{-- @foreach ($donations as $item)
                                            <option value="{{ $item['num'] }}">
                                                {{ $item['num'] . '-' . $item['name'] }}</option>
                                        @endforeach; --}}
                                        <option value="6193">
                                            {{ '6193-中華民國外籍人士關懷服務協會' }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label class="col-form-label col-sm-3">{{ __('robot.BuyerInformation') }}</label>
                    <div class="row mt-6 mb-3">
                        <div class="row col-md-6 mb-12">
                            <label class="col-form-label col-sm-4" for="name">{{ __('basic.Name') }}</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="payerName" name='payer_name' type="text" value='{{ $user['name'] }}' />
                            </div>
                        </div>
                        <div class="row col-md-6 mb-12">
                            <label class="col-form-label col-sm-4" for="payer_email">{{ __('basic.Email') }}</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="payerEmail" name='payer_email' type="email" value="{{ $user['email'] }}" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            {{-- Payment --}}
            <div class="card mb-6 px-6 py-4">
                <h4 class="border-bottom">{{ __('basic.Payment') }}</h4>
                <div class="row mt-6 mb-3">
                    <div class="col-sm-9 d-flex flex-md-row flex-column justify-content-between w-100">
                        @if ($cart_type == 'physical')
                            <div class="form-check form-check-inline lh-base">
                                <input class="form-check-input" id="payment_id_1" name="payment_id" type="radio" value="store_pickup">
                                <label class="form-check-label" for="payment_id_1">{{ __('robot.SuperCommercialGoodsToPayment') }}</label>
                            </div>
                            <div class="form-check form-check-inline lh-base">
                                <input class="form-check-input" id="payment_id_2" name="payment_id" type="radio" value="cod">
                                <label class="form-check-label" for="payment_id_2">{{ __('robot.HouseDeliveryToPayment') }}</label>
                            </div>
                        @endif
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="payment_id_3" name="payment_id" type="radio" value="credit_card">
                            <label class="form-check-label" for="payment_id_3">{{ __('robot.CreditCardToPayment') }}</label>
                        </div>
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="payment_id_4" name="payment_id" type="radio" value="bank_transfer">
                            <label class="form-check-label" for="payment_id_4">{{ __('robot.BankTransferToPayment') }}</label>
                        </div>
                        <div class="form-check form-check-inline lh-base">
                            <input class="form-check-input" id="payment_id_5" name="payment_id" type="radio" value="cvs">
                            <label class="form-check-label" for="payment_id_5">{{ __('robot.FamiBarCodeToPayment') }}</label>
                        </div>
                    </div>
                    <span class="text-danger" id="payment_id_error"></span>
                </div>
            </div>
            {{-- SHIPPMENT --}}
            <div id="div_shippment" class="card mb-6 px-6 py-4">
                <h4 class="border-bottom">{{ __('basic.ShippingDetail') }}</h4>
                <form id="receiver_fm" enctype="multipart/form-data">
                    @if (!empty($addressList))
                        @foreach ($addressList as $addr)
                            <div class="form-check mb-2 py-4">
                                <input class="form-check-input" id="address_{{ $addr['id'] }}" name="delivery_type" data-key="{{ $addr['id'] }}" data-charge="{{ $addr['delivery']['price'] }}"
                                    data-address-type="{{ $addr['address_type'] }}" type="radio">
                                <label class="form-check-label w-100 label_address border p-2" id="label_address_{{ $addr['id'] }}" for="address_{{ $addr['id'] }}">
                                    <div class="d-flex align-items-start pb-4">
                                        <div class="d-flex flex-column me-auto gap-3">

                                            <div>
                                                <span class="text-secondary">{{ __('basic.DeliveryType') }}</span>
                                                @switch($addr['address_type'])
                                                    @case('delivery')
                                                        <span>{{ __('basic.HomeDelivery') }}</span>
                                                    @break

                                                    @case('seven')
                                                        <span>{{ __('basic.UniMart') }}</span>
                                                    @break

                                                    @case('family')
                                                        <span>{{ __('basic.FamiMart') }}</span>
                                                    @break
                                                @endswitch

                                            </div>
                                            <div>
                                                <span class="text-secondary">{{ __('basic.Name') }}</span>
                                                <span>{{ $addr['recipient_name'] }}</span>
                                            </div>
                                            <div>
                                                <span class="text-secondary">{{ __('basic.Phone') }}</span>
                                                <span>{{ $addr['recipient_mobile'] }}</span>

                                            </div>
                                            <div>
                                                @switch($addr['address_type'])
                                                    @case('delivery')
                                                        @if (!empty($addr['address']))
                                                            <span class="text-secondary">{{ __('basic.Address') }}</span>
                                                            <span>{{ $addr['address'] }}</span>
                                                        @endif
                                                    @break

                                                    @case('seven')
                                                        <span class="text-secondary">{{ __('basic.Store') }}</span>
                                                        <span class="tag tag-outline">7-11</span>
                                                        <span class="text-primary">{{ $addr['store_name'] }}</span>
                                                    @break

                                                    @case('family')
                                                        <span class="text-secondary">{{ __('basic.Store') }}</span>
                                                        <span class="tag tag-outline">全家</span>
                                                        <span class="text-primary">{{ $addr['store_name'] }}</span>
                                                    @break
                                                @endswitch

                                            </div>

                                        </div>
                                        @if (!empty($addr['img_name']))
                                            <img class="w-25 me-3" src="{{ asset('storage/member/' . $addr['member_id'] . '/address/' . $addr['img_name']) }}" alt="">
                                        @endif

                                    </div>
                                    <input class="form-control receiverName" id="receiverName_{{ $addr['id'] }}" name='receiver_name' type="hidden" value='{{ $addr['recipient_name'] }}' />
                                    <input class="form-control" id="receiverPhone_{{ $addr['id'] }}" name='receiver_phone' type="hidden" value='{{ $addr['recipient_mobile'] }}' />
                                    <input class="form-control" id="delivery_id_{{ $addr['id'] }}" name='delivery_id' type="hidden" value="{{ $addr['address_type'] }}" />
                                    <input class="form-control" id="receiverStore_{{ $addr['id'] }}" name='receiver_store' type="hidden" value='{{ $addr['store_name'] }}' />
                                    <input class="form-control" id="receiverStreet_{{ $addr['id'] }}" name='receiver_street' type="hidden" value='{{ $addr['address'] ?? $addr['img_name'] }}' />
                                    <input class="form-control" id="address_img_name_{{ $addr['id'] }}" name='address_img' type="hidden" value='{{ $addr['img_name'] }}' />


                                </label>

                            </div>
                        @endforeach
                    @endif
                    <div class="form-check mb-2 py-4">
                        <input class="form-check-input" id="custom" name="delivery_type" data-key="custom" type="radio" checked>
                        <label class="form-check-label w-100 label_address border p-2" id="label_custom" for="custom">
                            <div class="form-check mb-4">
                                <input class="form-check-input" id="get_payer" type="checkbox" value="">
                                <label class="form-check-label" for="get_payer">
                                    {{ __('robot.SameAsBuyerInformation') }}
                                </label>
                            </div>
                            <div class="row">
                                <div class="row col-md-6 mb-4">
                                    <label class="col-form-label col-sm-4" for="name">{{ __('basic.Name') }}</label>
                                    <div class="col-sm-8">
                                        <input class="form-control receiverName" id="receiverName_custom" name='receiver_name' type="text" value='' />
                                    </div>
                                </div>
                                <div class="row col-md-6 mb-4">
                                    <label class="col-form-label col-sm-4" for="mobile">{{ __('basic.Phone') }}</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="receiverPhone_custom" name='receiver_phone' type="phone" value="{{ $user['mobile'] }}" />
                                    </div>
                                </div>
                                <div class="row col-md-12 mb-4">
                                    <label class="col-form-label col-sm-2" for="email">{{ __('basic.ReceiptMethod') }}</label>
                                    <div class="col-sm-3">
                                        <select class="form-control form-select" id="delivery_id_custom" name='delivery_id'>
                                            @foreach ($deliveryList as $item)
                                                @php
                                                    switch ($item['id']) {
                                                        case 'delivery':
                                                            $option_name = __('basic.HomeDelivery');
                                                            break;
                                                        case 'seven':
                                                            $option_name = __('basic.UniMart');
                                                            break;
                                                        case 'family':
                                                            $option_name = __('basic.FamiMart');
                                                            break;
                                                        case 'virtual':
                                                            $option_name = '虛擬';
                                                            break;
                                                    
                                                        default:
                                                            $option_name = '';
                                                            break;
                                                    }
                                                @endphp

                                                <option data-charge="{{ $item['price'] }}" value='{{ $item['id'] }}'>{{ $option_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    {{-- <a class="btn btn-primary col-sm-2" href="">{{ __('basic.SelectStore') }}</a> --}}
                                </div>
                                <div class="row_store row col-md-12 d-none mb-4">
                                    <label class="col-form-label col-sm-2" for="">{{ __('basic.Store') }}</label>
                                    <div class="col-sm-10">

                                        <div class="col pt-2">
                                            <div class="d-flex flex-md-row flex-column">
                                                <div class="form-check">
                                                    <input class="form-check-input" id="address_type_1" name="store_type" data-target='#receiverStore_address_photo' type="radio" checked>
                                                    <label class="form-check-label" for="address_type_1">
                                                        {{ __('basic.UploadAddressPhoto') }}
                                                    </label>
                                                </div>
                                                <div class="form-check ms-md-3 ms-0">
                                                    <input class="form-check-input" id="address_type_2" name="store_type" data-target='#receiverStore_custom' type="radio">
                                                    <label class="form-check-label" for="address_type_2">
                                                        {{ __('robot.ManuallyEnterStoreName') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col store_type mb-3">
                                            <label class="col-form-label" for="receiverStore_address_photo">{{ __('basic.UploadAddressPhoto') }}</label>
                                            <input class="form-control" id="receiverStore_address_photo" name='address_photo' type="file" />
                                        </div>
                                        <div class="col store_type mb-3" style='display:none;'>
                                            <label class="col-form-label" for="receiverStore_custom">{{ __('robot.StoreName') }}</label>
                                            <input class="form-control" id="receiverStore_custom" name='receiver_store' type="text" disabled />
                                        </div>

                                    </div>
                                </div>
                                <div class="row_address row col-md-12 mb-4">
                                    <label class="col-form-label col-sm-2" for="">{{ __('basic.Address') }}</label>
                                    <div class="col-sm-10">
                                        <div class="col pt-2">
                                            <div class="d-flex flex-md-row flex-column">
                                                <div class="form-check">
                                                    <input class="form-check-input" id="address_type_3" name="address_type" data-target='#address_photo' type="radio" checked>
                                                    <label class="form-check-label" for="address_type_3">
                                                        {{ __('basic.UploadAddressPhoto') }}
                                                    </label>
                                                </div>
                                                <div class="form-check ms-md-3 ms-0">
                                                    <input class="form-check-input" id="address_type_4" name="address_type" data-target='#receiverStreet_custom' type="radio">
                                                    <label class="form-check-label" for="address_type_4">
                                                        {{ __('basic.ManualInputAddressInfo') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col address_type mb-3">
                                            <label class="col-form-label" for="address_photo">{{ __('basic.UploadAddressPhoto') }}</label>
                                            <input class="form-control" id="address_photo" name='address_photo' type="file" />
                                        </div>
                                        <div class="col address_type mb-3" style='display:none;'>
                                            <label class="col-form-label" for="address_address">{{ __('basic.Address') }}</label>
                                            <input class="form-control" id="receiverStreet_custom" name='receiver_street' type="text" value="" />
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <input class="form-control" id="address_img_name_custom" name='address_img' type="hidden" value='' />

                        </label>

                    </div>
                </form>
            </div>
            {{-- Virtual SHIPPMENT --}}
            @if ($cart_type == 'virtual')
                <div id="" class="card mb-6 px-6 py-4">
                    <h4 class="border-bottom">{{ __('robot.SerialNumberReceiver') }}</h4>
                    <p>{{ __('robot.SerialNumberNotice') }}</p>
                    <div class="row mt-6 mb-3">
                        <div class="row col-md-6 mb-12">
                            <label class="col-form-label col-sm-4" for="name">{{ __('basic.Name') }}</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="receiver_name" name='receiver_name' type="text" value='{{ $user['name'] }}' disabled />
                            </div>
                        </div>
                        <div class="row col-md-6 mb-12">
                            <label class="col-form-label col-sm-4" for="mobile">{{ __('basic.Phone') }}</label>
                            <div class="col-sm-8">
                                {{-- <input class="form-control" id="receiver_phone" name='receiver_phone' type="text" value="{{ $user['mobile'] }}" disabled /> --}}
                                <select class="form-select" name="receiver_phone" id="receiver_phone">
                                    @foreach ($mobile as $m)
                                        <option value="{{ $m }}">{{ $m }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- CLC折抵 --}}
            <div class="card mb-6 px-6 py-4">
                <h4 class="border-bottom">{{ __('basic.DiscountUsedCLCCoin') }}</h4>
                <p>{{ sprintf(__('basic.OrderMaxDiscountCoinDesc'), $cart_type == 'virtual' ? session('user_coin_general') : session('user_coin')) }}</p>
                <form class="row mt-6 mb-3" id="coin_fm">
                    <div class="col">
                        <input class="form-control" id="coin_used" name="coin_used" type="number" value="0" min="0" placeholder="">
                    </div>
                    <div class="col">
                        <button class="btn btn-outline-dark" id="cal_coin" type="button">{{ __('basic.Comfirm') }}</button>
                    </div>


                </form>
            </div>
        </div>
        <!-- sidebar -->
        <div class="col-12 col-lg-4 col-md-5">
            <div class="card mb-5 mt-6">
                <div class="card-body p-6">
                    <div class="d-md-block">
                        <h2 class="h5 mb-4">Summary</h2>
                        <h6>{{ __('basic.Product') }}</h6>
                        <ul class="list-group list-group-flush mb-6">
                            @foreach ($cartList as $k => $cl)
                                <li class="list-group-item py-lg-0 py-3 px-0">
                                    <div class="row align-items-center">
                                        <div class="col-3">
                                            <img class="img-fluid" src="{{ $cl['stock_thumbnail'] ?? asset('image/product_07.png') }}" alt="Ecommerce">
                                        </div>
                                        <div class="col-5">
                                            <p class="text-base-r">{{ $cl['stock_name'] }}</h6>
                                        </div>
                                        {{-- 價格 --}}
                                        <div class="col-4 text-lg-end text-md-end text-start">
                                            <span class="text-base-r">${{ number_format($cl['subtotal']) }}</span>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        {{-- 結算 --}}
                        <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 class="me-auto">
                                        <div>{{ __('basic.Subtotal') }}</div>
                                    </div>
                                    <span>$</span>
                                    {{-- <span>{{ number_format($cartTotalAmount) }}</span> --}}
                                    <span id="itemSubtotal"></span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="me-auto">
                                        <div>{{ __('basic.Discount') }}</div>
                                    </div>
                                    <span class="text-danger">-$</span>
                                    <span class="text-danger" id="text_coin_used">0</span>
                                    <input id="coin" name="coin" type="hidden" value="0">
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="me-auto">
                                        <div>{{ __('basic.ShippingFee') }}</div>
                                    </div>
                                    <span>$</span>
                                    <span id="shippingCharge">0</span>
                                    <input id="deliveryAmount" type="hidden" value="0">
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="me-auto">
                                        <div class="fw-bold">{{ __('basic.Total') }}</div>
                                    </div>
                                    <span class="h5">$</span>
                                    {{-- <span class="h5" id="totalAmount">{{ number_format($cartTotalAmount) }}</span> --}}
                                    <span class="h5" id="totalAmount">0</span>
                                </li>
                            </ul>
                            <div class="d-flex justify-content-between text-sm-r">
                                <span>{{ __('basic.EarnCLCCoin') }}</span>
                                <span class="ms-auto text-warning me-1">{{ $cart_subtotal['coin'] }}</span>
                                <span class="text-warning">{{ __('basic.Coin') }}</span>

                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary btn-lg w-100" id="checkout" type="button">{{ __('basic.Checkout') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection