@extends('index')

@section('content')
    <section>
        <div class="container" id="cartInner">
            <ul class="d-flex my-5 color_808080">
                <li>{{__('custom.購物車')}}</li>
                <li class="px-4">|</li>
                <li>{{__('custom.填寫資料')}}</li>
            </ul>

            <div class="CartStepBox">
                <div class="Item active">
                    <div>1</div>
                    <p>{{__('custom.購物車')}}</p>
                </div>
                <div class="Line active"></div>
                <div class="Item active">
                    <div>2</div>
                    <p>{{__('custom.填寫資料')}}</p>
                </div>
                <div class="Line"></div>
                <div class="Item">
                    <div>3</div>
                    <p>{{__('custom.確認訂單')}}</p>
                </div>
            </div>

            <div class="CartBox">
                <h2>{{__('custom.填寫資料')}}</h2>
                <h3 class="mt-5 mt-lg-0">{{__('custom.發票相關')}}</h3>
                <form id="cartInnerForm" class="row">
                    <input type="hidden" name="purchase_name" value="{{$member['purchase_name']}}">
{{--                    <input type="hidden" name="member_sex" value="{{$member['member_sex']}}">--}}
                    <input type="hidden" name="purchase_phone" value="{{$member['purchase_phone']}}">
                    <input type="hidden" name="purchase_tel" value="{{$member['purchase_tel']}}">
                    <input type="hidden" name="purchase_city" value="{{$member['purchase_city']}}">
                    <input type="hidden" name="purchase_county" value="{{$member['purchase_county']}}">
                    <input type="hidden" name="purchase_postal_code" value="{{$member['purchase_postal_code']}}">
                    <input type="hidden" name="purchase_address" value="{{$member['purchase_address']}}">

                    <div class="col-12 mb-4">
                        <div class="d-flex">
                            <p><span class="color_E10000">*</span> {{__('custom.發票類型')}}</p>
                            <div class="d-flex ms-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" id="ReceiptRadios1" value="1" name="invoice_type" checked>
                                    <label class="form-check-label" for="ReceiptRadios1">
                                        {{__('custom.二聯式')}}
                                    </label>
                                </div>
                                <div class="form-check ms-3">
                                    <input class="form-check-input" type="radio" id="ReceiptRadios2" value="2" name="invoice_type" required>
                                    <label class="form-check-label" for="ReceiptRadios2">
                                        {{__('custom.三聯式')}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 mb-4">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <label for="lookup" class="col-form-label">{{__('custom.抬頭')}}</label>
                            </div>
                            <div class="col">
                                <input type="text" id="lookup" name="company_title" class="form-control inputH" placeholder="{{__('custom.請輸入您的公司抬頭')}}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 mb-4">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <label for="Unified" class="col-form-label">{{__('custom.統編')}}</label>
                            </div>
                            <div class="col">
                                <input type="text" id="Unified" name="company_number" class="form-control inputH" placeholder="{{__('custom.請輸入您的統一編號')}}">
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-4">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <label for="Unified" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.寄送方式')}}</label>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="send_invoice_address" value="send_receive_address" id="send1" checked>
                                        <label class="form-check-label" for="send1">
                                            {{__('custom.隨貨品寄送')}}
                                        </label>
                                    </div>
                                    <div class="form-check ms-3">
                                        <input class="form-check-input" type="radio" name="send_invoice_address" value="send_other_address" id="send2">
                                        <label class="form-check-label" for="send2">
                                            {{__('custom.其他')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg">
                                <input type="text" id="Address" class="form-control inputH" name="other_address" placeholder="{{__('custom.請輸入寄送地址')}}">
                            </div>
                        </div>
                    </div>
                </form>
                <h3 class="mt-4">{{__('custom.付款方式')}}</h3>
                <form class="row">
                    <div class="col-12 mb-4">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <label for="Unified" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.出貨區域')}}</label>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex">
                                    @if ($lang == 1)
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="receive_area" value="1" id="TaiwanBtn" checked>
                                            <label class="form-check-label" for="TaiwanBtn">
                                                {{__('custom.台灣地區')}}
                                            </label>
                                        </div>
                                        <div class="form-check ms-3">
                                            <input class="form-check-input" type="radio" name="receive_area" value="2" id="ChinaHongKongAndMacauBtn">
                                            <label class="form-check-label" for="ChinaHongKongAndMacauBtn">
                                                {{__('custom.中港澳地區')}}
                                            </label>
                                        </div>
                                    @else
                                        <div class="form-check ms-3">
                                            <input class="form-check-input" type="radio" name="receive_area" value="3" id="OverSeaBtn" checked>
                                            <label class="form-check-label" for="OverSeaBtn">
                                                {{__('custom.海外地區')}}
                                            </label>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-lg color_959595">
                                {{__('custom.非臺灣地區配送方式請參閱')}} <a class="btn_text_77" href="#">{{__('custom.購物指南')}}</a>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="Taiwan">
                    <form class="row">
                        <div class="col-12 mb-4">
                            <label for="PaymentMethods" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.請選擇付款方式')}}</label>
                            <select class="form-select inputH" aria-label="Default select example" name="payment_mode_tw">
                                <option selected>請選擇</option>
                                @foreach ($payment as $paymentInfo)
                                    @if ($paymentInfo->payment_code == 'unionpay') @continue @endif
                                    <option value="{{$paymentInfo->payment_code}}">{{trans('payment.'.$paymentInfo->payment_code)}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 mb-4">
                            <label for="Delivery" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.請選擇配送方式')}}</label>
                            <select class="form-select inputH" aria-label="Default select example" name="freight_mode_tw">
                                <option selected>請選擇</option>
                                @foreach ($freight as $freightInfo)
                                    @if ($freightInfo->freight_code != 3)
                                        @if ($freightInfo->freight_code == 2 && !is_null($volumeTotal) && $volumeTotal < 105)
                                            <option value="{{$freightInfo->freight_code}}" id="buywayTW2">{{$freightInfo->freight_title}}</option>
                                        @else
                                            <option value="{{$freightInfo->freight_code}}" id="buywayTW1">{{$freightInfo->freight_title}}</option>
                                        @endif
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <h3 class="mt-4">{{__('custom.收件人資料')}}</h3>
                        <div class="col-12 mb-4 color_959595">{{__('custom.若您的商品是做為贈品，請在下方填寫贈送收件人聯絡資訊')}}</div>
                        <div class="col-12 mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="TW_SamePurchase">
                                <label class="form-check-label" for="TW_SamePurchase">
                                    {{__('custom.同訂購人')}}
                                </label>
                            </div>
                        </div>
                        <div class="col-12 mb-4">
                            <label for="receive_name" class="form-label"><span class="color_E10000">*</span> {{__('custom.姓名')}}</label>
                            <input type="text" class="form-control inputH" name="receive_name" id="receive_name" placeholder="{{__('custom.請輸入您的姓名')}}">
                        </div>
                        <div class="col-lg-6 mb-4">
                            <label for="receive_phone" class="form-label"><span class="color_E10000">*</span> {{__('custom.聯絡電話')}}</label>
                            <input type="text" class="form-control inputH" name="receive_phone" id="receive_phone" placeholder="{{__('custom.請輸入您的電話')}}">
                        </div>
                        <div class="col-lg-6 mb-4">
                            <label for="receive_tel" class="form-label">{{__('custom.市話')}}</label>
                            <input type="text" class="form-control inputH" name="receive_tel" id="receive_tel" placeholder="{{__('custom.請輸入您的電話')}}">
                        </div>
                        <div id="twzipcode_cart" class="row"></div>
                        <div class="col-12 mb-4">
                            <input type="text" class="form-control inputH" name="receive_address" id="receive_address" placeholder="{{__('custom.如：埔中巷32-1號')}}">
                        </div>
                    </form>
                </div>

                <div id="ChinaHongKongAndMacau">
                    <form class="row">
                        <div class="col-12 mb-4">
                            <label for="PaymentMethods" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.請選擇付款方式')}}</label>
                            <select class="form-select inputH" aria-label="Default select example" name="{{$lang == 1 ? 'payment_mode_hk' : 'payment_mode_foreign'}}">
                                <option selected>請選擇</option>
                                @foreach ($payment as $paymentInfo)
                                    @if($lang == 1)

                                        @if ($paymentInfo->payment_code == 'atm' || $paymentInfo->payment_code == 'credit' || $paymentInfo->payment_code == 'unionpay')
                                            <option value="{{$paymentInfo->payment_code}}">{{trans('payment.'.$paymentInfo->payment_code)}}</option>
                                        @endif

                                    @else
                                        @if ($paymentInfo->payment_code == 'credit')
                                            <option value="{{$paymentInfo->payment_code}}">{{trans('payment.'.$paymentInfo->payment_code)}}</option>
                                        @endif
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 mb-4">
                            <label for="Delivery" class="col-form-label"><span class="color_E10000">*</span> {{__('custom.請選擇配送方式')}}</label>
                            <select class="form-select inputH" aria-label="Default select example" name="{{$lang == 1 ? 'freight_mode_hk' : 'freight_mode_foreign'}}">
                                <option selected>請選擇</option>
                                @foreach ($freight as $freightInfo)
                                    @if ($freightInfo->freight_code == 3)
                                        <option value="{{$freightInfo->freight_code}}">{{trans('freight.'.$freightInfo->freight_slug)}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <h3 class="mt-4">{{__('custom.收件人資料')}}</h3>
                        <div class="col-12 mb-4 color_959595">{{__('custom.若您的商品是做為贈品，請在下方填寫贈送收件人聯絡資訊')}}</div>
                        <div class="col-12 mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="CH_SamePurchase">
                                <label class="form-check-label" for="CH_SamePurchase">
                                    {{__('custom.同訂購人')}}
                                </label>
                            </div>
                        </div>
                        <div class="col-12 mb-4">
                            <label for="receive_name" class="form-label"><span class="color_E10000">*</span> {{__('custom.姓名')}}</label>
                            <input type="text" class="form-control inputH" name="{{$lang == 1 ? 'receive_name_hk' : 'receive_name_foreign'}}" id="receive_name" placeholder="{{__('custom.請輸入您的姓名')}}">
                        </div>
                        <div class="col-lg-6 mb-4">
                            <label for="receive_phone" class="form-label"><span class="color_E10000">*</span> {{__('custom.聯絡電話')}}</label>
                            <input type="text" class="form-control inputH" name="{{$lang == 1 ? 'receive_phone_hk' : 'receive_phone_foreign'}}" id="receive_phone" placeholder="{{__('custom.請輸入您的電話')}}">
                        </div>
                        <div class="col-lg-6 mb-4">
                            <label for="receive_tel" class="form-label">{{__('custom.市話')}}</label>
                            <input type="text" class="form-control inputH" name="{{$lang == 1 ? 'receive_tel_hk' : 'receive_tel_foreign'}}" id="receive_tel" placeholder="{{__('custom.請輸入您的電話')}}">
                        </div>
                        <div class="col-12 mb-4">
                            <label for="receive_address" class="form-label"><span class="color_E10000">*</span> {{__('custom.地址')}}</label>
                            <input type="text" class="form-control inputH" name="{{$lang == 1 ? 'receive_address_hk' : 'receive_address_foreign'}}" id="receive_address" placeholder="{{__('custom.智能櫃')}}">
                            <div class="color_959595 mt-2">{{__('custom.若您使用順便智能櫃 ，請至')}} <a class="btn_text_77832A" href="https://www.sf-express.com/hk/tc/dynamic_function/S.F.Network/EF-Locker/" target="_blank">{{__('custom.順便智能櫃')}}</a> {{__('custom.查詢後，回填點碼及地址。')}}</div>
                        </div>
                    </form>
                </div>

                <h3 class="mt-4">{{__('custom.訂單備註')}}</h3>
                <form class="row">
                    <div class="col-12">
                        <div class="mb-4">
                            <label for="exampleFormControlTextarea1" class="form-label">{{__('custom.備註')}}</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" name="order_remark" rows="5" placeholder="{{__('custom.請輸入您的備註')}}"></textarea>
                        </div>
                    </div>
                </form>
                <div class="my-5 text-end">
                    <a id="btnPreviousStep" class="btn_black btn_w" href="javascript:">{{__('custom.上一步')}}</a>
                    <a id="btnNextStep" class="btn_black btn_w mt-4 mt-lg-0 ms-lg-4" href="javascript:">{{__('custom.下一步')}}</a>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        function wrapZipcodeFields() {
            const $county = $("select[name='receive_city']");
            const $district = $("select[name='receive_county']");
            const $zipcode = $("input[name='receive_postal_code']");

            // 若尚未包裹過才進行包裹
            if (!$county.parent().hasClass('col-6')) {
                $county.wrap('<div class="col-6 col-lg-4 mb-3 mb-lg-4"></div>')
                    .before('<label class="col-form-label"><span class="color_E10000">*</span> {{__('custom.地址')}}</label>')
                    .addClass('form-select inputH');
            }

            if (!$district.parent().hasClass('col-6')) {
                $district.wrap('<div class="col-6 col-lg-4 mb-3 mb-lg-4 align-self-end"></div>')
                    .addClass('form-select inputH');
            }

            if (!$zipcode.parent().hasClass('col-6')) {
                $zipcode.wrap('<div class="col-6 col-lg-4 mb-3 mb-lg-4 align-self-end"></div>')
                    .addClass('form-select inputH')
                    .attr('disabled', 'disable');
            }
        }

        $('#twzipcode_cart').twzipcode({
            countyName: 'receive_city',        // 縣市 select 的 name
            districtName: 'receive_county',    // 區域 select 的 name
            zipcodeName: 'receive_postal_code', // 郵遞區號 input 的 name
            onCountySelect: function () {
                const selectedCounty = $("select[name='receive_city']").val();
                const isForeign = selectedCounty === '海外地區';

                $("select[name='receive_county']").toggle(!isForeign);
                $("input[name='receive_postal_code']").toggle(!isForeign).attr('disabled', 'disable');
            }
        });

        wrapZipcodeFields();

        if ($('#OverSeaBtn').is(':checked')) {
            $('#ChinaHongKongAndMacau').show();
            $('#Taiwan').hide();
        } else {
            $('#Taiwan').show();
            $('#ChinaHongKongAndMacau').hide();
        }

        $('input[name="receive_area"]').change(function () {
            if ($('#TaiwanBtn').is(':checked')) {
                $('#Taiwan').fadeIn();
                $('#ChinaHongKongAndMacau').fadeOut();
            } else {
                $('#Taiwan').fadeOut();
                $('#ChinaHongKongAndMacau').fadeIn();
            }

            if (!$('#TW_SamePurchase').is(':checked')) {
                $('#TW_SamePurchase [name=receive_name]').val('');
                $('#TW_SamePurchase [name=receive_phone]').val('');
                $('#TW_SamePurchase [name=receive_tel]').val('');
                $('#TW_SamePurchase [name=receive_address]').val('');
                $('#twzipcode_cart').twzipcode('reset');
            }

            if (!$('#CH_SamePurchase').is(':checked')) {
                $('#CH_SamePurchase [name=receive_name]').val('');
                $('#CH_SamePurchase [name=receive_phone]').val('');
                $('#CH_SamePurchase [name=receive_tel]').val('');
                $('#CH_SamePurchase [name=receive_address]').val('');
            }
        });

        /*同訂購人*/
        $('#TW_SamePurchase, #CH_SamePurchase').on('click', function () {
            let container;

            if (this.id === 'TW_SamePurchase') {
                container = $('#Taiwan');
            } else if (this.id === 'CH_SamePurchase') {
                container = $('#ChinaHongKongAndMacau');
            }

            if ($(this).is(':checked')) {
                container.find('[name=receive_name]').val($('[name=purchase_name]').val());
                container.find('[name=receive_phone]').val($('[name=purchase_phone]').val());
                container.find('[name=receive_tel]').val($('[name=purchase_tel]').val());
                container.find('[name=receive_city]').val();
                container.find('[name=receive_county]').val();
                container.find('[name=receive_postal_code]').val();
                container.find('[name=receive_address]').val($('[name=purchase_address]').val());
                if (this.id === 'TW_SamePurchase') {
                    $('#twzipcode_cart').twzipcode('set', {
                        'county': $('[name=purchase_city]').val(),        // 縣市
                        'district': $('[name=purchase_county]').val(),    // 鄉鎮區
                        'zipcode': $('[name=purchase_postal_code]').val() // 郵遞區號
                    });
                }
            } else {
                container.find('[name=receive_name]').val('');
                container.find('[name=receive_phone]').val('');
                container.find('[name=receive_tel]').val('');
                container.find('[name=receive_city]').val('');
                container.find('[name=receive_county]').val('');
                container.find('[name=receive_postal_code]').val('');
                container.find('[name=receive_address]').val('');
                if (this.id === 'TW_SamePurchase') {
                    $('#twzipcode_cart').twzipcode('reset');
                }
            }
        });

        /*上一步*/
        $('#btnPreviousStep').on('click', function () {
            let params = $('#cartInnerForm input[type="hidden"]').serialize();

            window.location.href = '/cart?' + params;
        });

        /*下一步*/
        $('#btnNextStep').on('click', function () {
            if ($('[name=receive_area]').val() == 1) {
                var payment_mode = $('[name=payment_mode_tw]').val();
                var freight_mode = $('[name=freight_mode_tw]').val();
            } else if ($('[name=receive_area]').val() == 2) {
                var payment_mode = $('[name=payment_mode_hk]').val();
                var freight_mode = $('[name=freight_mode_hk]').val();
            } else {
                var payment_mode = $('[name=payment_mode_foreign]').val();
                var freight_mode = $('[name=freight_mode_foreign]').val();
            }

            $.ajax({
                type: 'POST',
                url: '{{url('store/checkout_data')}}',
                data: $('#cartInner form').serialize()
                    +'&receive_postal_code=' + $('[name="receive_postal_code"]').val()
                    +'&freight_store=' + (freight_mode == 2 ? 'ecpay_711' : '')
                    +'&payment_mode=' + (payment_mode == '請選擇' ? '' : payment_mode)
                    +'&freight_mode=' + (freight_mode == '請選擇' ? '' : freight_mode)
                    +'&market_info='
                    +'&isNewebpay=1' // 至藍新金流
                    +'&_token={{ csrf_token() }}',
                dataType:' json',
                success: function (res) {
                    if (res.status) {
                        window.location.href = '{!! url('checkout_confirm') !!}?isNewebpay=1';
                    } else {
                        let text = '';
                        arrText = Object.values(res.text);
                        $.each(arrText, function(index, value) {
                            text += value+'<br>';
                        });
                        Swal.fire({
                            title:'提示',
                            type:'warning',
                            html:text,
                            confirmButtonText: '確定',
                            allowOutsideClick: false
                        });
                    }
                },
                error:function () {
                    Swal.fire({
                        title: '錯誤',
                        type: 'error',
                        text: '發生錯誤，請重整再試',
                        confirmButtonText: '確定',
                        allowOutsideClick: false
                    });
                }
            });
        });
    </script>
@endsection